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

2024-10-21 11:21:11

基于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监听div内容的变化具体实现思路

我们做电子商务,javascript框架采用的是jQuery,在开发过程中遇到了上面标题列出的问题:如何监听div内容的变化. 先给出最终代码(后续进行相关分析): 复制代码代码如下: var title = $("b.facility"); var title = $('#title');//the element I want to monitor title.bind('DOMNodeInserted', function(e) { alert('element now con
js与jquery实时监听输入框值的oninput与onpropertychange方法

本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发
jQuery事件的绑定、触发、及监听方法简单说明

如果你在写文章或者 Demo,为了简单,你当然可以用事件监听函数,以及那些事件对象提供的方法等.但在实际中,有一些方法和属性是有兼容性问题的,所以我们会使用 jQuery 来消除兼容性问题. 下面简单的来说一下 jQuery 中事件的基础操作. 绑定事件和事件代理在 jQuery 中,提供了诸如 click() 这样的语法糖来绑定对应事件,但是这里推荐统一使用 on() 来绑定事件.语法: .on( events [, selector ] [, data ], handler ) event
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解

本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法.分享给大家供大家参考,具体如下: 这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), 实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
让input框实现类似百度的搜索提示(基于jquery事件监听)

挺炫的一个效果,百度和谷歌好像已实现好多年了,我以为在网上能轻易找到代码来实现这个效果.真正遇到这个需求,发现还真找不到.于是自己动手写这个效果,由于我是把效果整合到我的整套框架里,所以没有进行单独的封装. 需求:实现带提示的input框,类似百度搜索,有改动的时候去获取常用关键词,数据来源于系统数据库,支持鼠标选择或键盘选择思路:框架一贯思路,通过class作为监听入口,通过data作为数据传递:通过监听input和propertychange事件实现实时的改动监听,input是主流,pro
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)

基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求使用扫码枪扫描条码,在一个web页面监听获取扫码枪的数据,并禁止用户进行手动的输入操作. 开始的想法非常简单,因为扫码枪就是模拟键盘的输入,当他用usb接口插入电脑的时候,就变成了一个外接的输入设备,用js监听就可以了.但是如何判断用户是否为手动输入就需要做一些处理了. 二.主要问题 1.如何判断是否手动输入 2.如何判断一个条码输入完成三.解决方案手
jQuery监听浏览器窗口大小的变化实例

方法一:在标签上加入 onLoad="" onResize="" 方法写上对应的方法即可方法二:window.onresize=function(){///.....} 在方法里面写上对应的代码即可着两种方法基本都可以解决问题. <script> function adjust(obj){ var div = document.getElementById("pad"); var txt = document.getEle
jQuery监听文件上传实现进度条效果的方法

原理: 给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程 var xhr=new XMLHttpRequest(); xhr.upload.onprogress=function(e){} 因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现首先封装一个方法传入一个监听函数返回
Android实现音频条形图效果(仿音频动画无监听音频输入)

音频条形图如下图所示就是这次的音频条形图: 由于只是自定义View的用法,我们就不去真实地监听音频输入了,随机模拟一些数字即可. 如果要实现一个如上图的静态音频条形图,相信大家应该可以很快找到思路,也就是绘制一个个的矩形,每个矩形之间稍微偏移一点距离即可.如下代码就展示了一种计算坐标的方法. for (int i = 0; i < mRectCount; i++) { // 矩形的绘制是从左边开始到上.右.下边(左右边距离左边画布边界的距离,上下边距离上边画布边界的距离) canvas.dra
vue监听用户输入和点击功能

本文实例为大家分享了vue监听用户输入和点击的具体代码,供大家参考,具体内容如下功能1:监听用户输入和点击,并实时显示, 功能2:点击发布,编辑页面隐藏,显示发布成功. 功能1 html代码: 使用:v-model监听,!submmited视图默认显示,注意监听option v-for="(i,index) in authors" v-bind:value="authors[index], 监听当下用户点击的那个: <div id="add-blog&q
Android EditText 监听用户输入完成的实例

我们都知道, Android EditText输入框,并没有监听用户输入完成的功能,需要我们自己实现. 下面是实现的方法,仅供参考: EditText editText = (EditText) findViewById(R.id.edit); editText.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, i
LayUI switch 开关监听获取属性值、更改状态的方法

背景今天在设计页面时,想使用一下 LayUI 的 switch 控件,在需要更改状态的时候进行 ajax请求传输需要获取其中的自定义属性值,同时根据服务器返回数据进行状态的更改通过参考文档及网友的经验,在此整理一番使用方法场景: 后台商品列表页,进行上下架状态的修改 ①. html 代码参考着重注意我设置的两个属性值 lay-filter,switch_goods_id <input type="checkbox" class="switch_checke
layui监听select变化,以及设置radio选中的方法

一.select监听 1.首先,要给select加一个layui提供的属性 lay-filter="level" 这里面的level自己定义,下面会用到 2.导入form layui.use('form', function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 form.on('select(level)'),function() { //内容 }); form.render();//注意如果是动态添加的select
Android编程监听APK安装与删除等过程的方法

本文实例讲述了Android编程监听APK安装与删除等过程的方法.分享给大家供大家参考,具体如下: 软件下载后的一系列动作监听:先前是通过Service监听扫描获取状态,以后用这个方法测试使用 import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.widget.Toast; public class getBro
vuejs中监听窗口关闭和窗口刷新事件的方法

1.使用window.onunload之类的API window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示'; }; 2.在生命周期钩子中注册监听事件 methods: { beforeun

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

相关推荐

随机推荐