vue中的input框点击后不聚焦问题
更新时间：2022年04月24日 10:48:42 作者：黄金钢铁侠
这篇文章主要介绍了vue中的input框点击后不聚焦问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
input框点击后不聚焦问题
废话不多说直接上代码
哪个地方要写input框 就直接把这一部分代码放上 里面双向绑定的值和事件换上自己定义的
<div class="item" @click.stop.prevent="inputPaentClick('input1')">
<input
ref="input1"
placeholder="请输入搜索关键词"
v-model="value"
@keydown.enter="searchs"
/>
</div>在方法里写上这些
inputPaentClick(refName) {undefined
//解决input框双击才可以聚焦问题
this.$nextTick(() => {undefined
this.$refs[refName] && this.$refs[refName].focus();
});
}只复制这些就行 input里绑定的事件以及要实现的方法 写在这个事件同级的地方
vue input聚焦的坑
点击按钮，使某个input框聚焦
1、给 input 加个 ref 属性，写个 button 按钮并加个点击事件
<input type="text" ref="input"> <button @click="onFocus"></button>
2、onFocus方法：
onFocus() {
this.$refs.input.focus()
}加载页面时自动聚焦
mounted() {
this.$nextTick(() => {
this.$refs.input.focus()
})
},【坑】
如果input框是隐藏的，点击某个元素让input框显示，同时聚焦，这个时候聚焦效果就不会实现。
解决办法：
点击元素的时候用个变量做标识，然后再watch里面去监听这个变量，通过判断这个变量的值来聚焦，
可以写在setTimeout里面，或者写在nextTick里面即可解决问题；代码如下
watch: {
isClick(){
if(this.isClick == false) {
setTimeout(() => {
this.$refs.input.focus()
}, 100);
// this.$nextTick(() => {
// this.$refs.input.focus()
// });
}
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue.js实现数据动态响应，Vue.set的简单应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了VUE页面中通过双击实现复制表格中内容，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了在vue中v-for循环遍历图片不显示错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了vue组件和iframe页面的相互传参问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了在antd Form表单中select设置初始值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了浅谈Vue.js 组件中的v-on绑定自定义事件理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了iview的table组件自带的过滤器实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
在现代 web 开发中,用户与系统的交互体验越来越重要,而文件上传和文件预览是最常见的交互场景之一,本文将详细介绍如何在 Vue 项目中使用 Vue Elements 来实现文件预览的功能,包括基本使用方法、常见实例、性能优化以及样式自定义等内容,需要的朋友可以参考下2025-01-01
下面小编就为大家分享一篇Vue.js自定义事件的表单输入组件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue实现渲染数据后控制滚动条位置，本文通过图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
最新评论