使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)


Posted in jQuery onMarch 21, 2017

基于jQuery的扫码枪监听。如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展。

一、功能需求

使用扫码枪扫描条码,在一个web页面监听获取扫码枪的数据,并禁止用户进行手动的输入操作。

开始的想法非常简单,因为扫码枪就是模拟键盘的输入,当他用usb接口插入电脑的时候,就变成了一个外接的输入设备,用js监听就可以了。但是如何判断用户是否为手动输入就需要做一些处理了。

二、主要问题

1.如何判断是否手动输入

2.如何判断一个条码输入完成

三、解决方案

手动输入的解决办法就是:对比一个键从按下到抬起的时间间隔,以及两次按键的时间间隔。

因为扫码枪的输入速度非常的快,我测试的扫码枪输入的间隔大概在15-60毫秒,然后手动输入的100-200之间,除非刻意的想突破限制进行快速的输入。这个间隔值可以控制的很小,前提不要快过扫码抢的速度。

输入完成的判断:可以对输入框变化做一个监听,如果达到我们想要的位数,则提交服务器端进行处理;第二种是基于扫码枪,因为我使用的扫码枪可以配置扫码成功最后附加一个回车。所以根据回车的keycode就可以判断为输入已经结束,然后获取输入框的value,再进行后续的处理(提交服务器等)。

四、代码

时间间隔的判断,依赖于jQuery的三个事件:keydown,keypress,keyup;即键开始按下,已经按下,弹起这三个状态,keydown,就是在按键刚刚被按下,但键值还没有写入文本框,keypress已经按下并且值已经输入到文本框,keyup就是弹起了。

需要做判断的就是按键从按下到抬起的时间间隔,与两次keydown的时间间隔。

主要的手动输入判断代码。

var barcode = {
  listenerObj: null,
  oneKeyTime : '', /* 一次按键时间间隔 */
  twoKeyTime : '', /* 两次按键时间间隔 */
  keyDownTime: '', /* 键按下的时间  */
  barcodeLen : 8 , /* 条形码长度   */
  spanTime  : 70, /* 一次按键按下到释放的时间间隔 */
  on_key_down : function (){
    var that = this;
    this.listenerObj.keydown(function(e){
      if(e.which !== 13 && !(that.in_range(e.which))){
        $(that.listenerObj).val('');
        return ;
      }
      var d = new Date();
      var curTime = parseInt(d.getTime());
      if(that.keyDownTime !== '' && that.keyDownTime !== NaN){
        that.twoKeyTime = curTime - that.keyDownTime;
      }
      that.keyDownTime = curTime;
    });
  },
  on_key_up : function(){
    var that = this;
    this.listenerObj.keyup(function(e){
      var d = new Date();
      var keyUpTime = d.getTime();
      that.oneKeyTime = parseInt(keyUpTime) - parseInt(that.keyDownTime);
      var isHand = that.checkHandInput();
      if(isHand && that.in_range(e.which)){
        layer.msg('禁止手动输入');
        $(that.listenerObj).val("");
      }
    })
  },
  on_key_press : function(){
    var that = this;
    this.listenerObj.keypress(function(e){
      if(e.which == 13 && that.check_barcode()){
        that.createListEl();
      }
    });
  },
  checkHandInput : function(){
    if((this.oneKeyTime > this.spanTime) || this.twoKeyTime > this.spanTime){
      return true;
    }else{
      return false;
    }
  },
}

将代码整理了一下,放到了Github。

我的js代码中的提示用到了layer.js,所以如果使用按照index.html中的示例,引入相关的js:

<input id="barCode" value="" type="text" placeholder="stay focus" style="" name="">
$("#barCode").startListen({
  barcodeLen : 10,
  letter : true,
  number : true,
  show : function(code){
    layer.msg(code);
  }
});

这里可配置的参数:包括条码的长度,是否包含英文字母,是否包含数字。以及一个show回调方法,这个方法会在扫码成功,条码合法的情况下被调用,返回条码的值,以便做自定义的操作,如上传服务器等。

代码中对页面的输入框做了stay focus,所以页面有其他的输入需求无法实现,可以除去keepFocusInput的调用。

以上所述是小编给大家介绍的使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
简单实现jQuery手风琴效果
Aug 18 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
You might like
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
用vue和node写的简易购物车实现
2017/04/25 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
python正则分组的应用
2013/11/10 Python
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
python友情链接检查方法
2015/07/08 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
python使用udp实现聊天器功能
2018/12/10 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
思想政治教育专业个人求职信范文
2013/12/20 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
小学毕业寄语大全
2014/04/03 职场文书
五分钟演讲稿
2014/04/30 职场文书
小学感恩节活动总结
2015/03/24 职场文书
教师节倡议书2015
2015/04/27 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电