vue2/3框架，input隐藏显示后自动获取焦点无效_vue 显示隐藏后input 失去焦点

作者：IT小白 | 2024-02-16 20:38:29

踩

vue 显示隐藏后input 失去焦点

问题场景：

在vue操作input DOM节点或，导致autofocus（自动获取焦点失效）；

解决方案：


HTML部分
 
描述：
v-model为input的值
ref，vue3中为一个ref实例，可以获取到dom节点（vue2的写法请自行切换）
 
代码：
<input type="text" v-model="labelValue" ref="El_editInput"/>


JS部分
 
const El_editInput = ref();
 
// 显示dom节点
function showInput(){
  nextTick(() => {
    El_editInput.value.focus();
  })
}

注意事项：
在操作input显示的时候，要是用nextTick()，等待dom渲染完成后调用focus()；

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/96514