动态令牌验证遇到的问题（判断用户长按backspace键）

因为最近负责泰康项目的前端工作，他们的登录需要进行安全验证，也就是所谓的双因素验证，即在OA平台登录过后，还需要安全部门发送安全令牌进行验证。令牌验证效果如下：

主要功能有：1、默认第一项focus。 2、输入后自动跳转到下一个  3、输入超过2位自动改为1位数   4、长按backspace全部删除

html部分代码：具体就是几个Input 样式可以自己去改

<input v-model="num1" ref="num1" class="codeInp" type="text">
<input v-model="num2" ref="num2" class="codeInp" type="text">
<input v-model="num3" ref="num3" class="codeInp" type="text">
<input v-model="num4" ref="num4" class="codeInp" type="text">
<input v-model="num5" ref="num5" class="codeInp" type="text">
<input v-model="num6" ref="num6" class="codeInp" type="text">

实现输入一个自动跳到下一个方法如下：

使用watch方法进行监听，当输入的值的长度大于等于1时，我就认为用户输入过了，如果输入超过2位，自动取最后一位，然后让下一个聚焦

watch: {
    num1(val) {
      if(this.num1.length>=1){
        this.num1 = val.slice(-1);
        this.changeFn(this, "num2");
      }
    },
    num2(val) {
      if(this.num2.length>=1){
        this.num2 = val.slice(-1);
        this.changeFn(this, "num3");
      }
    },
    num3(val) {
      if(this.num3.length>=1){
        this.num3 = val.slice(-1);
        this.changeFn(this, "num4");
      }
    },
    num4(val) {
      if(this.num4.length>=1){
        this.num4 = val.slice(-1);
        this.changeFn(this, "num5");
      }
    },
    num5(val) {
      if(this.num5.length>=1){
        this.num5 = val.slice(-1);
        this.changeFn(this, "num6");
      }
    },
    num6(val) {
      if (this.num6.length>=1) {
        this.num6 = val.slice(-1);
      }
    }
  },

让下一个聚焦的方法如下：

changeFn(_this, str) {
    _this.$refs[str].focus();
}

遇到最大的问题是长按后退键时，把所有值置空，然后第一个聚焦

最开始的思路是，用户按下记录一个时间，然后使用定时器setInterval，每100毫秒在获取一次时间，如果后获取的时间-按下的时间>1000毫秒，则判定用户长按了，然后置空所有值和聚焦。但是实现起来在我执行完操作后，使用clearInterval发现无法清除定时器。

于是换了个思路，使用setInterval监听，初始设置一个状态为false，按下后退键状态改为true，键盘抬起状态改为false，500毫秒后如果键盘没有抬起即状态扔为true，则判定用户长按了后退键，相比setInterval更加方便，代码如下：

let _this = this;
    document.onkeydown = function(e){
      e = e || event;
      if(e.keyCode == 8){
        _this.pressBack = true;
        setTimeout(()=>{
          if(_this.pressBack){
            _this.num1 = '';
            _this.num2 = '';
            _this.num3 = '';
            _this.num4 = '';
            _this.num5 = '';
            _this.num6 = '';
            _this.$refs.num1.focus()

          }
        },500)
      }
    }

    document.onkeyup = function(e){
      e = e || event;
      if(e.keyCode == 8){
        _this.pressBack = false;
      }
    }