原理：给每个input框都绑定ref属性和获取焦点事件，然后我们根据当前获取焦点的input框，然后判断他是否存在上一个或者下一个input框，如果存在，就让他的上一个或者下一个input框获取焦点

1.第一步，给每个input框都设置ref属性

image.png

2.设置一个数组，里面存放的是对应input框是否获取焦点的状态

  focusList: [false, false, false, false]

3.给每个input框都设置获取焦点事件

   getInputFocus(index) {
      for (let a = 0; a < this.focusList.length; a++) {
        if (index == a) {
          this.focusList[a] = true
        } else {
          this.focusList[a] = false
        }
      }
    },

4.监听键盘的左右键（左键keyCode 37 右键keyCode 39）

document.onkeydown = (e) => {
       e = event || window.event;
       switch (e.keyCode) {
         case 37:  //左键
           for (let a = 0; a < this.focusList.length; a++) {   //从右向左，所以上一个input框是a-1
             if (this.focusList[a] && this.$refs['input' + (a - 1)]) {
               this.focusList[a] = false
               this.focusList[a - 1] = true;
               let inputName= 'input' + (a - 1)
               this.$nextTicket(()=>{
                 this.$refs[inputName].focus()
               })
               return;
             }
           }
           break;
         case 39: //右键
           for (let a = 0; a < this.focusList.length; a++) {  //从左往右，所以下一个input框是a+1
             if (this.focusList[a] && this.$refs['input' + (a + 1)]) {
               this.focusList[a] = false
               this.focusList[a + 1] = true;
               let inputName= 'input' + (a + 1)
               this.$nextTicket(()=>{
                 this.$refs[inputName].focus()
               })
               return;
             }
           }
           break
         case 38: //上键
           window.event.returnValue = false;  //禁止键盘上下键事件
           break;
         case 40: //下键
           window.event.returnValue = false;  //禁止键盘上下键事件
           break;
       }
     }

温馨提示：
1.以上写法，仅仅适应页面上input框位置固定的情况下写的，如果页面上的部分input框存在增删的情况，则可能不适用，需要加以修改
2.以上写法是针对vue页面写的，ref属性也是vue里面获取dom元素的方法，如果你们项目不是vue写的，也可设置id属性或者其他的，反正原理就是让dom元素依次往下排，让数组里面的数据和dom元素名称对应起来