使用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 Plupload上传插件的使用
Apr 19 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery实现简单评论区功能
Oct 26 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中的观察者模式
2010/03/24 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
php curl常用的5个经典例子
2017/01/20 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
通过C++学习Python
2015/01/20 Python
Python的时间模块datetime详解
2017/04/17 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
python 如何快速复制序列
2020/09/07 Python
Python如何批量生成和调用变量
2020/11/21 Python
使用Python实现音频双通道分离
2020/12/25 Python
如何编写python的daemon程序
2021/01/07 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
会计专业自荐信范文
2013/12/02 职场文书
爱之链教学反思
2014/04/30 职场文书
食品安全演讲稿
2014/09/01 职场文书
小王子读书笔记
2015/06/29 职场文书
董事长年会致辞
2015/07/29 职场文书
python实现简单反弹球游戏
2021/04/12 Python
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS