vue输入框失去焦点事件,vue输入框自动聚焦
本文主要介绍了vue中点击后输入框不聚焦的问题，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
点击vue输入框后，问题不会被聚焦。点击按钮使一个输入框成为焦点，并在加载页面时自动聚焦在[pit]上。
input框点击后不聚焦问题
废话不多说，直接去码
想写输入框的地方，直接把这部分代码放进去就行了，用自己的定义替换两个方向绑定的值和事件。
div class= item @ click . stop . prevent= inputPaentClick( input 1 )
投入
ref=输入1
Placeholder=请输入搜索关键字
v-model=值
@keydown.enter=searchs
/
/div
将这些写在方法中。
inputPaentClick(refName){未定义
//解决输入框只有双击才能聚焦的问题。
这个。$nextTick(()={undefined
这个。$refs[refName] this。$refs[refName]。焦点()；
});
}
就抄这些。输入中绑定的事件和要实现的方法都是在这个事件的同一层编写的。
vue input聚焦的坑
点击按钮，使某个input框聚焦
1.向input添加一个ref属性，编写一个button按钮并添加一个click事件。
输入类型=text ref=input
button @click=onFocus/button
2.聚焦方法：
onFocus() {
这个。$refs.input.focus()
}
加载页面时自动聚焦
已安装(){
这个。$nextTick(()={
这个。$refs.input.focus()
})
},
【坑】
如果输入框是隐藏的，单击一个元素使输入框同时显示和聚焦。这时候对焦效果就实现不了。
解决办法：
当你点击一个元素时，用一个变量来标识它，然后在watch中监听这个变量，通过判断这个变量的值来聚焦它。
可以写在setTimeout或者nextTick中解决问题；代码如下所示
观察：{
isClick(){
if(this.isClick==false) {
setTimeout(()={
这个。$refs.input.focus()
}, 100);
//这个。$nextTick(()={
//这个。$refs.input.focus()
//});
}
}
}
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。