vue 实现输入框自动跳转，让表单填写更轻松

前言

最近接到这么一个需求，做一个安全码的输入框，限制为6位数，但是每一个写入的值都是一个输入框，共计6个输入框，当前输入框写入值后，光标自动跳到下一个输入框中，删除当前输入框写入的值后再自动跳到上一个输入框中。

---

实现思路

首先我们需要通过 keyup() 事件在用户输入完字符后，利用 document.getElementsByClassName 方法获取到输入框的 dom 元素集合，拿到当前元素的 key 和 index 值，通过判断确定光标是否跳到下一个输入框（focus）还是光标失焦（blur）;keydown() 事件主要就是为了防止一旦输入过快，一个输入框中会有多个字符的问题。 本章用到的属性以及方法如下：

focus()

focus() 当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。

blur()

当元素失去焦点时发生 blur 事件。blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。

keyup()

keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。

keydown()

当键盘键被按下时触发 keydown 事件。需要注意的是 keydown() 是在键盘按下触发，而 keyup() 是在键盘松手就会触发。

document.getElementsByClassName()

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

---

完整源码

<template>
  <div class="parentBox">
    <div v-for="(item, index) in inputList" :key="index">
      <input type="text" v-model="item.pinless" class="inputValue" @keyup="keyboard($event, index)" @keydown="expurgate(index)" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 输入框循环的数组
      inputList: [
        { pinless: "" },
        { pinless: "" },
        { pinless: "" },
        { pinless: "" },
        { pinless: "" },
        { pinless: "" },
      ],
      value: "", //输入的值
    };
  },
  methods: {
    // 键盘松开事件
    keyboard(e, index) {
      let domNode = document.getElementsByClassName("inputValue"),
        currInput = domNode[index],
        nextInput = domNode[index + 1],
        lastInput = domNode[index - 1];
      if (e.keyCode != 8) {
        if (index < this.inputList.length - 1) {
          nextInput.focus();
        } else {
          currInput.blur();
        }
      } else {
        if (index != 0) {
          lastInput.focus();
        }
      }
      let val = [];
      this.inputList.forEach((item) => {
        val.push(item.pinless);
      });
      this.value = val.join("");
      console.log(this.value);
    },
    // 键盘按下触发
    expurgate(index) {
      this.inputList[index].pinless = "";
    },
  },
};
</script>
<style scoped>
.parentBox {
  padding: 20px;
  display: flex;
}
.parentBox div:nth-child(n + 2) {
  margin-left: 4px;
}
input {
  color: #606266;
  font-size: 18px;
  text-align: center;
  width: 54px;
  height: 62px;
  border: 2px solid gainsboro;
  border-radius: 4px;
}
</style>

以上代码实现过程：

• 首先，在 vue 的 data 属性中定义了一个数组 inputList，其中包含了 6 个对象，每个对象都有一个属性 pinless 用于保存用户在输入框中输入的字符，初始值为空字符串；
• 在模板(template)的部分，使用了 v-for 指令来循环渲染 inputList 数组。每个输入框都绑定了 pinless 属性作为 v-model，这样每次用户输入时，可以自动更新相应的 pinless 值；
• 在 methods 中定义了两个方法：keyboard 方法和 expurgate 方法；
• keyboard 方法用于处理键盘松开事件。传入事件对象 e 和当前输入框的索引 index。首先获取所有输入框的 dom 节点，并分别取出当前、下一个和上一个输入框的节点。如果键盘按键不是删除键(键码不等于 8)，则检查是否为最后一个输入框：如果是，则取消当前输入框的焦点(blur())；如果不是，则将焦点切换至下一个输入框(nextInput.focus())。如果按下的是删除键，并且不是第一个输入框，则将焦点切换至上一个输入框(lastInput.focus())。然后将所有输入框中的字符取出并拼接成一个字符串，赋值给 this.value，并打印出来；
• expurgate 方法用于处理键盘按下事件。传入当前输入框的索引 index。在该方法中，将当前输入框的 pinless 属性值设为空字符串，即清空当前输入框的内容；
• 在样式部分，使用了 scoped 属性使得样式只在当前组件中生效。样式定义了输入框的外观，包括颜色、字体大小、文本居中、边框样式等。

---

实现效果