vue中的input框点击后不聚焦问题

目录
  • input框点击后不聚焦问题
  • vue input聚焦的坑
    • 点击按钮，使某个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()
        // });
      }
    }
  }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • element input输入框自动获取焦点的实现

    最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 focus 状态. 但是,element并不支持autofocus属性,那就只能通过原生的js效果获取聚焦效果了 document.getElementById("input").focus(); 或者利用vue的ref属性也可以实现聚焦效果: 原理其实很简单,Element 已经提供了 focus 方法,但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性,然后在需要

  • vue实现Input输入框模糊查询方法

    本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search

  • vue 表单输入框不支持focus及blur事件的解决方案

    采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例): 1.html引用: v-mtfocus 2.在实例中添加指令 directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.querySelector('input') mtinput.onfocus = function () { ...//如果要对节点的数据进行更改,且更改要映射到页面上,则更改可在vnode.context上进行,这样,改完之后,改变就会映

  • vue中的input框点击后不聚焦问题

    目录 input框点击后不聚焦问题 vue input聚焦的坑 点击按钮,使某个input框聚焦 加载页面时自动聚焦 [坑] input框点击后不聚焦问题 废话不多说直接上代码 哪个地方要写input框  就直接把这一部分代码放上   里面双向绑定的值和事件换上自己定义的  <div class="item" @click.stop.prevent="inputPaentClick('input1')">         <input      

  • Vue中封装input组件的实例详解

    Vue中封装input组件的实例详解

    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>

  • vue中简单弹框dialog的实现方法

    效果如下,dialog中内容自行添加 <template> <div> <div class="dialog-wrap"> <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div> <transition name="drop"> <div class=

  • vue中使用input[type="file"]实现文件上传功能

    注意:input[type="file"] 标签中的属性accept="application/msword,application/pdf" 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下---下面有更改:) ``` <template> <div id="my-careers"> <h

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • VUE项目去除input 框值所有空格的操作方法

    去除空格的方法 str.trim(); //去掉首尾空格 str.replace(" ",""); //去除所有空格,包括首尾.中间 str.replaceAll(" ", ""); //去掉所有空格,包括首尾.中间 str.replaceAll(" +",""); //去掉所有空格,包括首尾.中间 str.replaceAll("\\s*", ""

  • vue中使用@blur获取input val值

    目录 使用@blur获取input val值 vue表单input 框使用@blur事件 使用@blur获取input val值 @blur="validScore($event)" validScore(event){ alert(event.target.value) } vue表单input 框使用@blur事件 input 框失去焦点 ,便会触发定义的方法 form表单代码 <el-form-item label="身份证号码:" prop="

  • vue中input框的禁用和可输入问题

    目录 input框的禁用和可输入 关于输入框的一些操作 input框的禁用和可输入 input是我们经常使用的文本输入框,在vue中我们可以用v-model来绑定输入框的值,但是有时我们拿到一个值并通过v-model绑定到一个input框里,但是我们只想要显示这个值,不能修改,然后在某些特定的情况下在去改变这个值,这个时候就牵涉到文本框的禁用了    <input       type="text"//绑定的值       v-model="Copy.possWord1

  • vue中监听input框获取焦点及失去焦点的问题

    vue中监听input框获取焦点及失去焦点的问题

    目录 一.背景 二.首先是正宗的监听事件的写法 1.html代码 2.JS部分 三.为什么上次监听焦点事件失败呢 1.不好用的原因 2.新增指令的方法 一.背景 博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况.当时百思不得其解.今天又在写vue页面的时候,突然@blur和@focus又好用了.emmmm,看来这部分值得一战. 二.首先是正宗的监听事件的写法 1.html代码 //这是html的输入框.定义了一个获取焦点,失去焦点的方法 <input pla

  • Vue项目中input框focus时不调出键盘问题的解决

    目录 input框focus时不调出键盘问题 自动获取input焦点(内含ios不能唤起键盘解决方法) 最开始的用法 如果想要解决ios不生效办法 input框focus时不调出键盘问题 在移动端,实现input框获得焦点的同时不会唤起手机键盘. 亲测有效!!! <input type="text" placeholder="收货地址" v-model="address3" @focus.prevent="showcountF&q

随机推荐