如何禁止手工输入但允许扫码器输入

问题起因

最近项目中遇到了一个问题,需求是希望可以禁止键盘输入,只允许使用扫码器进行输入。这个问题如果是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 » 如何禁止手工输入但允许扫码器输入

赞 (2)
分享到:更多 ()

发表评论 0