Vue 实现输入框的聚焦

目录

方法一、绑定 ref

方法二、使用自定义指令——官网

方法三、通过事件中的事件对象 $event，找到 input

方法四、使用原生

---

本人需求场景 ， 在解决用户通过输入数字来控制输入框的高度时 ， 谷歌浏览器能够正常 v-model 双向绑定 ， 实时更新同步 ， 但是唯独到了 IE 浏览器里 ， 右边修改了高度数据后 ， 输入框的高度并没有发生改变 ， 而是当我去点击过输入框之后才会发生改变 ， 所以脑回路就想到了那既然如此 ， 就让其当用户输入完成后 ， 判断一下是否为 IE 浏览器时 ， 让输入框自动聚焦一下， 不就也能近似的实现了同步处理了么 ， 所以在此就整理一下 怎样操作才能控制让其输入进行聚焦呢 ？

方法一、绑定 ref

从 Vue 的实例属性 $ref 去调 input 的 focus 方法使其实现 聚焦 。

<template>
 <div class="box">
   <input type="text" ref="ipt">
   <br>
   <button @click="btn">点击使input聚焦</button>
 </div>
</template>
<script >
export default{
  methods:{
    btn(){
      this.$refs.ipt.focus()
    }
  }
}
</script>

当点击聚焦按钮时，使其上面的 input 框实现 聚焦 。

---

不过这种方法有一定的局限性 ， 因为其 $refs 的使用必须得是父子组件之间才行 ， 要是碰上了兄弟组件之间的操作 ， 就不太合适了 。

---

方法二、使用自定义指令——官网

利用 Vue 的 自定义指令 与 指令 v-focus 进行 监听 实现 。

<template>
  <div class="box">
    <input type="text" ref="ipt" v-focus="statefocus" @blur="b" />
    <br />
    <button @click="btn">点击使input聚焦</button>
  </div>
</template>
<script >
export default {
  data() {
    return { statefocus: false };
  },
  methods: {
    btn() {
      this.statefocus = true;
    },
    b() {
      this.statefocus = false;
    },
  },
  directives: {
    Focus: {
      update: function (el, { value }) {
        if (value) {
          // if(true)就聚焦
          el.focus();
        }
      },
    },
  },
};
</script>

---

方法三、通过事件中的事件对象 $event，找到 input

---

方法四、使用原生

---

项目所用 ：

A 组件 ：

B 组件 ：

<template>
  <div>
    文本框高 :
    <el-input
      v-model="data.answerInputRow"
      :maxlength="2"
      :disabled="data.quInputType !== '1'"
      placeholder="3 / 行"
      @input="rowNumInput($event, data.answerInputRow, data)"
    ></el-input>
  </div>
</template>

<script>
import digitalInput from "../../../utils/digitalInput";
import { isIE } from "../../../utils/tools";

export default {
  rowNumInput(event, modelValue, data) {
    // 限制用户输入非数字内容(文本框高)
    data.answerInputRow = digitalInput(event, modelValue);
    // IE 浏览器使其自动聚焦
    if (isIE()) {
      this.$nextTick(() => {
        /* 使用原生 */
        document.getElementById("ieFocus").focus();
      });
    }
  },
};
</script>

---