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完成，假设您还有另一个输入元素，我们可以使用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();
}

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

1 个答案: