最近给某汽车公司做管理系统，需要一个这样的需求，客户希望一刷刷卡机，就弹出报修系统，而不是必须在input里面的刷，很不方便。
读卡器就是市场是普通的IC读卡，厂家没有提供任何浏览器插件。
机器拿在手上发现，一刷卡发现浏览器在input状态下会直接输入，想到有可能是模拟键盘的操作。于是可以测试一下，直接绑定在document.onkeypress，可以发现触发的键盘事件以及enter事件，由于是机器操作，两次键盘事件触发的间隔极短。
这样的话我们可以直接利用键盘事件去做直接弹框，同时可以利用人和机器的时间差，去判断是人还是刷卡。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body class="hold-transition login-page">
<!-- 输入框 -->
<input type="text" name="" value="" autofocus>
</body>
<script>
window.onload = function(e){
code = ""; // 模拟输入的值
var lastTime,nextTime;// 记录两次键盘的时间
var lastCode,nextCode;// 两次键盘的键码值
document.onkeypress = function(e) {// 监听键盘事件
nextCode = e.which;// 当前的键码
nextTime = new Date().getTime();// 当前的毫秒数
console.log(nextCode,(nextTime - lastTime));
if(nextCode >= 48 && nextCode <= 57){// 只关注数字键
if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) {// 相差30以内说明是机器刷卡
code += String.fromCharCode(lastCode);// 把键盘码返回为对应的值
} else {// 手动在输入
code = "";
}
// 当前的键盘码和时间作为下一次的上一次
lastCode = nextCode;
lastTime = nextTime;
}
if(nextCode == 13){//enter键代表刷卡结束
if(code && (nextTime - lastTime) <= 100){// 刷卡的卡号获取成功,且是机器触发的enter
code += String.fromCharCode(lastCode);
window.location.href="http://www.baidu.com";
}
}
}
}
</script>
</html>
网友评论