使用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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python Paramiko模块的安装与使用详解
2016/11/18 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
python自定义函数def的应用详解
2020/06/03 Python
Keras设置以及获取权重的实现
2020/06/19 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
构造方法和其他方法的区别
2016/04/26 面试题
演讲主持词
2014/03/18 职场文书
经典安踏广告词
2014/03/21 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
离婚协议书样本
2015/01/26 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
认真学习保证书
2015/02/26 职场文书
长江七号观后感
2015/06/11 职场文书
python文件目录操作之os模块
2021/05/08 Python