在匹配输入长度时触发选项卡事件

Question

我有一个特定的要求，我需要在匹配该条件后触发选项卡事件。因此，只要输入长度的值与给定长度匹配，我就需要触发 tab 事件，以便将焦点移动到下一个可聚焦元素。

<template>
  <input type="text" v-model="username" @input="handleInput">
</template>

<script>
export default {
  data() {
    return {
      username: null
    };
  },
  methods: {
    handleInput(e) {
      const value = e.target.value;
      if (value && value.length >= 5) {
        // I would like to trigger tab event here
      }
    }
  }
};
</script>

Answer 1

好的，这可以使用 Vue ref 和 javascript 来完成，假设你有另一个 input 元素，我们可以使用 Vue ref 来访问 dom 元素本身，

<div id="app">
    <input type="text" v-model="username" @input="handleInput">
    <input type="text" ref="input2" />
</div>

在js端可以使用元素的focus方法，

if (value && value.length >= 5) {
  this.$refs["input2"].focus();
}