vue中控制input获取焦点

Posted sxsyhyk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中控制input获取焦点相关的知识,希望对你有一定的参考价值。

遇到一个任务需要实现直接点击内容来编辑,光标离开Input就保存内容

技术图片

 

点击内容实现下面这种获取点击表格内input光标

 技术图片

 

 我找了下,有ref和自定义指令两种,我选了比较适合的ref来操作

ref在循环外和循环中被获取到的是两种状态,当有多个ref相同时,通过this.$refs.ref获取循环外的ref只会获取到最后一个元素,在循环中会获取到所有相同ref元素的数组。

所以我给了所有input相同的ref再通过点击使用index来使目标input获取焦点:this.$refs.ref[index].focus(),这样就解决了最大的难题。

以上是关于vue中控制input获取焦点的主要内容,如果未能解决你的问题,请参考以下文章

vue全局自定义指令input自动获取焦点指令

vue element ui input 自动获取焦点(解决autofocus只有第一次起作用问题,)

Flutter控制某个TextField获取焦点及失去焦点

Vue中输入框自动获取焦点-移动端ios不能唤起键盘解决办法

Vue中输入框自动获取焦点-移动端ios不能唤起键盘解决办法

element el-input 自动获取焦点和IE下光标位置解决方法