vuejs实现输入完input自动跳到下一个input

功能需求：做一个身份证后四位输入或汽车牌照输入，每个数字/字母一个input，想输入完当前的input后自动跳到下一个input，删除当前input后自动跳到前一个。

1、template代码

<div v-for="(item, index) in inputList" :key="index">
  <input
    type="text"
    v-model="item.val"
    class="inputValue"
    @keyup="inputNextFocus($event, index)"
    @keydown="cancelValue(index)"
  />
</div>
//注意：inputValue

2、script代码

data() {
  return {
    inputList: [{ val: "" }, { val: "" }, { val: "" }, { val: "" }], //根据个数
  }
}
methods: {
  inputNextFocus(el, index) {
    var dom = document.getElementsByClassName("inputValue"), //引入inputValue
      currInput = dom[index],
      nextInput = dom[index + 1],
      lastInput = dom[index - 1];
    if (el.keyCode != 8) {
      if (index < this.inputList.length - 1) {
        nextInput.focus();
      } else {
        currInput.blur();
      }
    } else {
      if (index != 0) {
        lastInput.focus();
      }
    }
  },
  cancelValue(index) {
    this.inputList[index].val = "";
  }
}

以上是编程学习网小编为您介绍的“vuejs实现输入完input自动跳到下一个input”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。