input眼睛显示 vue_vue 点击编辑按钮 显示input输入框同时获取焦点

最新推荐文章于 2024-07-26 23:52:22 发布
最新推荐文章于 2024-07-26 23:52:22 发布
阅读量563 收藏 1
点赞数
文章标签： input眼睛显示 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39770626/article/details/111529467
版权

最近在做一个使用element-ui组件库搭建的后台系统的项目，遇到一个需求是：在table列表里面点击编辑，可以实现编辑内容的需求大概就是下面图的样子：

项目图

然后就是点击编辑按钮可以实现编辑table表里面的内容。实现过程都很顺利，然后发现点击编辑变成input输入框后获取不到焦点。

然后尝试使用原生属性autofocus，但是这个属性 只在模板加载完成时起作用，也就是说只有第一次有用。

然后尝试了ref，再this.$refs.el 也不能成功拿到该元素，因为饿了么组件封装的对应的是外面一个div，里面包了个input，在获取元素的时候有问题的。然后决定使用原生的input标签代替element-ui里面的el-input组件。

然后然后查看vue文档决定用，diretives 自定义指令，完美实现需求。

实现代码如下

HTML代码：

特别注意：再编辑内容和输入框的切换时要使用v-show进行切换，自定义一个focusState值

js代码：自定义指令

事件

最后完美实现功能

weixin_39770626
关注
Vue - 最新详细实现点击按钮（笔图标）可编辑 input 输入框，点击文字内容后变成 ＜input＞ 输入框同时能修改和取消、删除（详细示例代码，一键复制运行）
王佳斌
07-06 8643
本文将提供给您一个健壮且代码注释详细的组件源码，无样式只写了核心功能，您直接复制，然后按照自己的需求去 更改样式与逻辑，如下图所示：这样的基础示例，更有利于您进行修改和学习！打开 文件夹，在里面建立一个 文件，复制以下代码。 使用示例 随便找个页面，运行起来。 SEO vueinput实现点击按钮文字增删功能，关于vue点击对输入框进行编辑相关内容,包含vue点击对输入框进行编辑，vue 点击编辑按钮后 页面变成input输入框，Vue实现点击表格单元格出现输入框，失去焦点隐藏输入框功能，利用vue插
vue组件中点击按钮后修改输入框的状态实例代码
08-30
要求点击修改按钮之后部分输入框由禁用状态变为可用状态。下面我给大家分享一段实例代码基于vue组件中点击按钮后修改输入框的状态，需要的的朋友参考下
vue element 点击按钮 按钮成为输入框
kenandeyaya的博客
08-15 1783
vue element 点击按钮 按钮成为输入框
Vue学习—点击事件AND显示和隐藏
最新发布
2301_79659699的博客
07-26 552
- keyup 用户松开按键时触发的事件，enter表示会回车 -->让状态可以来回切换， 将false改成!web.show即可。先选中文本框出现光标，点击回车后，数值增加。通过该种方式可以实现自定义快捷键的设置。简写和普通方法所得到的结果是一样的。做一个捉迷藏小效果吧（如下图）
input眼睛显示 vue_vue中input输入框的模糊查询实现
weixin_39628864的博客
12-19 147
最近在使用vue写webapp在，一些感觉比较有意思的分享一下。1：input输入框：2：对input输入框的keyup事件进行处理，通过每输入一个字符触发一次keyup事件，来对接口进行数据请求。search () {let searchText = this.$refs.searchval.valueif (searchText =='') {return} else {this.closeS...
vue 自定义指令自动获取文本框焦点
热门推荐
lx_1024的博客
01-02 1万+
HTML：{{tag}} js: 官方例子： directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }我的： directives: { focus:function (el) {
Vue.js 点击按钮显示/隐藏内容
06-21
如何使用vue进行按钮点击后指定区域内容隐藏，再次点击按钮隐藏内容显示。实现思路：首选需要设置一个属性为true(show:true)，然后使用v-if把show属性绑定到要显示与内容的标签身上，最后给点击按钮添加点击事件，当show属性为true就设置为false，为false就设置为true(this.show = !this.show)即可。
vue3 获取焦点，vu3 input 获取焦点 Vue 3 focus input
09-08
我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点，请看附件，已经正常使用。 请放心下载
input取消焦点 vue_vue 表单输入框不支持focus及blur事件的解决方案
weixin_39735166的博客
12-19 1953
采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例):1.html引用: v-mtfocus2.在实例中添加指令directives: {'mtfocus' (el, binding, vnode) {let mtinput = el.querySelector('input')mtinput.onfocus = function () {...//如果要对节点的数据进行更改,且更改...
input取消焦点 vue_vue中，页面上的input框自动获取焦点及二次获取焦点问题
weixin_34896969的博客
12-28 3524
需求：点击button按钮，录入成功后，页面上的input框自动聚焦，快速进行下一次录入，提高效率开始尝试了几种方法都没有成功一、首先想到的用vue指令 v-focus，然而没有成功v-model="book.isbnOrIssn"@change.native="_getIsbn"@blur="_getIsbn":disabled="snDisabled"v-focusplaceholder="请...
input眼睛显示 vue_2019前端面试题汇总（主要为Vue）
weixin_35698805的博客
12-30 124
毕业之后就在一直合肥小公司工作，没有老司机、没有技术氛围，在技术的道路上我只能独自摸索。老板也只会画饼充饥，前途一片迷茫看不到任何希望。于是乎，我果断辞职，在新年开工之际来到杭州，这里的互联网公司应该是合肥的几十倍吧。。。。刚来3天，面试了几家公司，有些规模比较小，有些是创业公司，也有些已经发展的不错了；今天把最近的面试题目做个汇总，也给自己复个盘，由于我的技术栈主要为Vue，所以大部分题目都是V...
input输入款点击小眼睛显示或隐藏密码
04-19
前端登录界面输入密码，input输入款点击小眼睛显示或隐藏密码。
input眼睛显示 vue_修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标...
weixin_39613744的博客
12-19 470
一、修改input元素placeholder属性样式在做项目的时候，一般表单元素的placeholder属性样式都是使用浏览器默认的，但有时候为了追求设计上的美感需要修表单元素的placeholder样式(也有可能是遇到了一个处女座的设计师或者是客户)，就不等不修改一下placeholder的样式。可以通过下面的代码修改样式：/*Chrome、Safari等 webkit内核浏览器*/::-web...
展示的元素 span 点击就可以展示为 input 进行操作
weiwudexinyang的博客
04-22 1134
方法一， 找到 item 当前项对应的 index，点击的时候把 list[index].inputFlag = true, 在 input 元素上加上 v-show="item.inputFlag",或者新增一个当前点击 ShowIndex 变量， v-show=" index === ShowIndex" 这种方式比较常用 方法二通过查找当前元素的兄弟元素，控制显隐 (都是玩具代码，大家自己找有用的地方哈) <div id="yaoshanchuId"> <span
vue项目中做点击按钮复制文本框内容
Ls66666Ls的博客
12-08 380
新增插件：npm install clipboard --save 写的VUE 导入 import Clipboard from ‘clipboard’; <div> <button ref="copy" :data-clipboard-text="scope.row.activityUrl" @click="copy" id="copy_text">复制活动链接</button> </div> methods: { copy: func
在jsp页面中点击编辑按钮，显示input边框，可编辑，点击保存按钮，输入框消失，不可编辑，并将文本框中的内容保存到数据库中
爱学习的大雄的博客
12-07 3086
寻找的资料 一、 默认readonly不允许编辑。点击编辑的时候加上边框样式，去掉readonly属性 <style>.readonly input{border:none}</style> <div id="dvInput" class="readonly"> text1：<input type="text" readonly value="text1" /><br /> text2：<input type="text" readon
输入框怎么才会长“眼睛”？——显示密码与隐藏密码
microlv1996的博客
08-25 1万+
会长“眼睛”的input输入框： 注：本文所需图片或者文件都在文章末尾处 我们在登入账户，进入登入页面中。在密码框，我们会遇到旁边有一个像眼睛的图标。只要点击了它，密码会显示会隐藏（如下图显示），这到底是什么“绝技”？待小编慢慢道来。 我们知道，html页面中input标签，我们可以设置type属性。type为text代表着填写的是文本（显示文字），type为pasword代表着填写的是密码（隐藏文字），点击”闭眼”图标可以设置type为password，点击”睁眼”图标可以设置type为text
隐藏input的小眼睛的方法
m0_63953314的博客
08-13 2089
隐藏input的小眼睛
IE10以上input自带的叉号和眼睛
yuelife的博客
08-06 1079
从IE 10开始，type=”text” 的 input 在用户输入内容后，会自动产生一个小叉叉（X），方便用户点击清除已经输入的文本；type=”password” 的 input 在用户输入内容后，会自动产生一个小眼睛，用来显示或隐藏密码。怎样消除这个和其他浏览器的不同呢？ input::-ms-clear{display: none;} input::-ms-reveal{display: none;} 其中 ::-ms-clear 是文本清除按钮，也就是input右方的叉叉 ::-ms-revea
Vue表格中动态显示隐藏的input输入框实现
在Vue.js开发中，遇到的一个常见需求是在表格（例如使用Element UI的el-table）中实现鼠标移入移出特定单元格时，input输入框的显示与隐藏效果。当你将鼠标移到某个单元格，该单元格中的input元素会显示出来，允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值