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

最新推荐文章于 2024-05-11 14:36:51 发布

shooke

最新推荐文章于 2024-05-11 14:36:51 发布

阅读量5.8k

点赞数

分类专栏： web前端文章标签： web

本文链接：https://blog.csdn.net/shooke/article/details/61415726

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

问题起因

最近项目中遇到了一个问题，需求是希望可以禁止键盘输入，只允许使用扫码器进行输入。这个问题如果是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组合处理。方式有很多，这里只记录一个简单的例子，提供一种思路。

shooke

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
如何禁止手工输入但允许扫码器输入

问题起因最近项目中遇到了一个问题，需求是希望可以禁止键盘输入，只允许使用扫码器进行输入。这个问题如果是cs端软件实现起来相对容易写，可以根据接入的端口进行判断，但如果是usb就无能为力了。更何况我们是web程序呢。但是有问题就有解决的办法。分析扫码器和键盘输入有什么区别呢？从原理上讲是没有区别的，同样是模拟键盘的输入。但是，扫码器的输入速度比人的输入速度要快的多。于是就有了下面的代码<!DOCTYP
复制链接

扫一扫