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简单介绍vue安装和卸载方法

html5如何input禁止文本输入（控制输入）

js如何限制input输出（只允许整数和小数点）

input设置只允许输入汉字

利用input做一个颜色选择器即时渲染

标签： input, vuejs

上面是“vuejs实现输入完input自动跳到下一个input”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2177.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！