动态令牌验证遇到的问题(判断用户长按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;
}
}
动态令牌验证遇到的问题(判断用户长按backspace键)的更多相关文章
- .NET WebAPI 用ActionFilterAttribute实现token令牌验证与对Action的权限控制
项目背景是一个社区类的APP(求轻吐...),博主主要负责后台业务及接口.以前没玩过webAPI,但是领导要求必须用这个(具体原因鬼知道),只好硬着头皮上了. 最近刚做完权限这一块,分享出来给大家.欢 ...
- 动态令牌-(OTP,HOTP,TOTP)-基本原理
名词解释和基本介绍 OTP 是 One-Time Password的简写,表示一次性密码. HOTP 是HMAC-based One-Time Password的简写,表示基于HMAC算法加密的一次性 ...
- WebAPI 用ActionFilterAttribute实现token令牌验证与对Action的权限控制
.NET WebAPI 用ActionFilterAttribute实现token令牌验证与对Action的权限控制 项目背景是一个社区类的APP(求轻吐...),博主主要负责后台业务及接口.以前没玩 ...
- Nginx集群之SSL证书的WebApi令牌验证
目录 1 大概思路... 1 2 Nginx集群之SSL证书的WebApi令牌验证... 1 3 Openssl生成SSL证书... 2 4 编写.NE ...
- ASP.NET Core Razor页面禁用防伪令牌验证
在这篇短文中,我将向您介绍如何ASP.NET Core Razor页面中禁用防伪令牌验证. Razor页面是ASP.NET Core 2.0中增加的一个页面控制器框架,用于构建动态的.数据驱动的网站: ...
- JMeter接口测试实战-动态数据验证
JMeter接口测试实战-动态数据验证 说到验证就不得不说断言, 先来看下JMeter官方给出断言(Assertion)的定义, 用于检查测试中得到的响应数据等是否符合预期,用以保证测试过程中的数据交 ...
- ThinkPHP表单令牌验证功能详细介绍
注:TP版本为3.1.3 在ThinkPHP框架下,两次提交同一个表单,比如提交信息后在浏览器点击后退退回上次的页面,重新点击提交按钮,就会提示“表单令牌错误”的信息. ThinkPHP新版内置了表单 ...
- ThinkPHP自动令牌验证(附实例)
一.数据表结构 user表结构如下: id username password 二.view模板部分 /view/index.html页面如下: 1 2 3 4 5 6 <form acti ...
- (六)SSO之CAS框架扩展 改动CAS源代码实现与ESS动态password验证对接
题记: 偶尔的偶尔我们会听到这个站点的数据泄露了,那个站点的用户数据泄露了.让用户又一次改动登录password,所以,对于用户数据安全性越发的引起我们的重视了,尤其是一些保密性要求高的站点.更须要添 ...
随机推荐
- Python 学习笔记4 变量-字符串
Python中的字符串,我们可以简单的认为是一组用单引号,双引号,三引号包含的一组字符,数字或者特殊字符.在Python3中,所有的字符串都是Unicode字符串. 变量定义 #单引号 string1 ...
- spring注解简单记录
@Autowired 自动匹配,按类型 @qualifiter("beanname") 当有多个bean匹配时,可指定bean名称 @Resource byname优先匹配,然后b ...
- wx.createSelectorQuery() 获取节点信息 获取不到解决方法
场景:一个气泡的宽度由加载来的数据填充所决定,不定宽, wx.createSelectorQuery().selectAll('.talkbubble').boundingClientRect ...
- Java注解--笔记
@Override标签的作用@Override是伪代码,所以是可写可不写的.它表示方法重写,写上会给我们带来好处. 1.可以当注释用,方便阅读. 2.告诉阅读你代码的人,这是方法的复写. 3.编译器可 ...
- 关于Java项目打包成Runnable jar文件后运行时图片不显示的问题
现象:在eclipse中能够无误运行,但导出Runnable jar后运行jar包时不显示图片. 原因:路径问题. 方法1: 新建一个文件夹.文件夹中放那个jar包和image文件夹.在这种情况下,双 ...
- matlab工作空间数据导入simulink
使用的是其中一种方式: 第一步在工作命令区 ,写命令: 第二步:保证导入simulink区,及from worker设置: 其中注意设置你的采样时间, 第三步设置scop : 采样时承接数据线上 ...
- Angular系列文章之angular路由
路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute. ...
- XLSReadWriteII5导入excel数据
procedure TForm1.Button1Click(Sender: TObject); var xls: TXLSReadWriteII5; openFile: TOpenDialog; Ro ...
- abap 变量检查
1:sap logon中可以对变量命名进行检查 program>check>code inspector
- [LintCode] 77. Longest common subsequences_ Medium tag: Dynamic Programming
Given two strings, find the longest common subsequence (LCS). Example Example 1: Input: "ABCD&q ...