input六位验证码，输入自动跳到下一格，删除自动回退到上一格

做桌面应用时页面要求输入六位验证码进行验证，UI设计出来是6个独立格子要求输入数字和字母，当用户输入数字/字母，光标自动跳到下一格，删除时光标要退回上一格。 卑微前端提出验证码换成横线输入，结果惨败，好吧确实格子好看…555，开始研究光标定位

1. 先在页面摆六个输入框

2. 输入框校验

一位数字或者大写字母

 oninput="value = value.replace(/[^\w]/g, '').replace(/(\w{1})\w*/, '$1').toUpperCase()"
 @blur="validForm.num5 = $event.target.value"

3. 键盘抬起时光标移动

3.1 input 键盘事件监听

除了最后一个input外，都需加上键盘监听处理函数 jumpTo
注意：使用elementUI这里要加.native；使用elementPlus不用加

 @keyup="jumpTo('后一个格子的refName', $event)"   // 适用于vue3.X + elementPlus 
 @keyup.native="jumpTo('后一个格子的refName', $event)"  //  加.native 适用于vue2.X + elementui 

3.2 键盘监听处理函数

 jumpTo(value, e) {
      if (e.keyCode >= 48 && e.keyCode <= 57) this.$refs[value].focus()
      else if (e.keyCode >= 97 && e.keyCode <= 122) this.$refs[value].focus()
      else if (e.keyCode >= 65 && e.keyCode <= 90) this.$refs[value].focus()
    },

4. 键盘删除键抬起时光标移动

4.1 input 键盘监听删除

除了第一个input外，都需加上键盘监听处理函数 goBack

 @keyup.delete.native="goBack('前一个格子的refName')"

4.2 删除按键处理函数

  goBack(value) {
      this.$refs[value].focus()
    },