因为最近负责泰康项目的前端工作,他们的登录需要进行安全验证,也就是所谓的双因素验证,即在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; } }