前端ABC问题起因
最近项目中遇到了一个问题，需求是希望可以禁止键盘输入，只允许使用扫码器进行输入。这个问题如果是cs端软件实现起来相对容易写，可以根据接入的端口进行判断，但如果是usb就无能为力了。更何况我们是web程序呢。但是有问题就有解决的办法。
分析
扫码器和键盘输入有什么区别呢？从原理上讲是没有区别的，同样是模拟键盘的输入。但是，扫码器的输入速度比人的输入速度要快的多。于是就有了下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘输入测试</title>
<script>
var keydownFirstTime = 0;
function keyup(obj) {
var date = new Date();
var nowTime = date.getTime();
if (obj.value.length<2) {
keydownFirstTime = nowTime;
}
if(nowTime-keydownFirstTime >500){
obj.value='';
}
}
</script>
</head>
<body>
<input onkeyup="keyup(this)">
</body>
</html>
为什么是用onkeyup而不是用onkeydown检测，是因为只有键盘松开时输入内容才会进入input，如果用onkeydown每次都会有一个字符在里面。
当然也有其他办法解决这种问题。但我们希望用最简单快捷的方式去解决。于是选择了用onkeyup事件。
还有一个问题，如果用时是中文状态，输入一串内容最后回车也会。一次性输入很多的内容。这就需要进行其他处理，比如过滤中文字符。比如onkeydown和onkeyup组合处理。方式有很多，这里只记录一个简单的例子，提供一种思路。
欢迎分享本文，转载请保留出处：前端ABC » 如何禁止手工输入但允许扫码器输入