使用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实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 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
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
初始Nodejs
2014/11/08 NodeJs
原生javascript实现隔行换色
2015/01/04 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
降低python版本的操作方法
2020/09/11 Python
python 读取、写入txt文件的示例
2020/09/27 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
护士毕业生自荐信
2014/02/07 职场文书
后备干部考察材料
2014/02/12 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
高三英语复习计划
2015/01/19 职场文书
2015入党自传格式范文
2015/06/26 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python