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 解决v-model让select默认选中不生效的问题
这篇文章主要介绍了vue.js 解决v-model让select默认选中不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue中使用Sortable的示例代码
这篇文章主要介绍了Vue中使用Sortable的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
如何在Vue项目中使用axios请求
这篇文章主要介绍了如何在Vue项目中使用axios请求，对Vue感兴趣的同学，可以参考下
2021-05-05
vue项目webpack中Npm传递参数配置不同域名接口
这篇文章主要介绍了vue项目webpack中Npm传递参数配置不同域名接口，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
vue中的面包屑导航组件实例代码
这篇文章主要介绍了vue的面包屑导航组件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
vuex中能直接修改state吗
当我们使用vuex的时候，时不时能看到“更改Vuex中的store中的状态唯一办法就是提交mutations”，但是有没有试想过，我们不提交mutations其实也能修改state的值？答案是可以的，下面通过本文介绍下vuex修改state值的方法，感兴趣的朋友一起看看吧
2022-11-11
vsCode中vue文件无法提示html标签的操作方法
在vsCode中书写Vue页面时无法提示,那真是很郁闷的事情,下面这篇文章主要给大家介绍了关于vsCode中vue文件无法提示html标签的操作方法,需要的朋友可以参考下
2023-03-03
VUE+node（express）实现前后端分离
在本篇文章里小编给大家分享的是关于VUE+node（express）前后端分离实例内容，有需要的朋友们参考下。
2019-10-10
详解vue父子组件关于模态框状态的绑定方案
这篇文章主要介绍了详解vue父子组件关于模态框状态的绑定方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
vue指令 v-bind的使用和注意需要注意的点
这篇文章主要给大家分享了 v-bind的使用和注意需要注意的点，下面文章围绕 v-bind指令的相关资料展开内容且附上详细代码需要的小伙伴可以参考一下，希望对大家有所帮助
2021-11-11