php 监听条码枪输入,使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)...
基于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:
$("#barCode").startListen({
barcodeLen : 10,
letter : true,
number : true,
show : function(code){
layer.msg(code);
}
});
这里可配置的参数:包括条码的长度,是否包含英文字母,是否包含数字。以及一个show回调方法,这个方法会在扫码成功,条码合法的情况下被调用,返回条码的值,以便做自定义的操作,如上传服务器等。
代码中对页面的输入框做了stay focus,所以页面有其他的输入需求无法实现,可以除去keepFocusInput的调用。
上面讲到的是小编给大伙介绍的使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐),希望对各位网友能有帮助,有任何疑问或建议请关注我们公众号(shtmlnet)给我们留言,。。在这十分感谢大家对学猫在线(shtml.net)网站的支持!
本文来源:http://www.cnblogs.com/skyfynn/p/6589866.html
php 监听条码枪输入,使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)...相关推荐
- php 监听条码枪输入,使用jQuery监听扫码枪输入并禁止手动输入的实现方法
@(知识点总结)[jquery|扫码抢] 基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求 使用扫码枪扫描条 ...
- php 监听条码枪输入,运用jQuery监听扫码枪输入并制止手动输入的完成要领
基于jQuery的扫码枪监听.假如只是想完成监听猎取条码扫码信息,能够直接拿来运用,假如有更多的条码推断处置惩罚逻辑须要本身扩大. 一.功用需求 运用扫码枪扫描条码,在一个web页面监听猎取扫码枪的数 ...
- php 监听条码枪输入,jQuery监听扫码枪禁止手动输入的实现方法
本文主要和大家 分享基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展哦,希望能帮助到大家. 一.功能需求 使用扫码枪扫描条码 ...
- php 监听条码枪输入,一起看看js获取扫码枪输入数据的方法
1.扫码枪相当于键盘输入设备,输入一连串数字后加一个enter键.但在实际开发中需要区分是扫描枪输入还是键盘用户输入,区别在于扫码枪输入很快.let code = ''; let lastTime, ...
- 扫码枪输入mysql_使用jQuery监听扫码枪输入并禁止手动输入的实现方法
@(知识点总结)[jquery|扫码抢] 基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求 使用扫码枪扫描条 ...
- python读取usb扫码枪_使用jQuery监听扫码枪输入并禁止手动输入的实现方法
基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求 使用扫码枪扫描条码,在一个web页面监听获取扫码枪的数据, ...
- js 条码枪扫描_使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
下面通过实例代码给大家介绍js扫码枪扫描条形码的实现方法,具体代码如下所示: var keycode = ""; var lastTime=null,nextTime; var l ...
- jquery 监听input输入停止,实现文本框自动跳转
今天学到了一个新的东西,在此记录一下 我遇到了一个这样的需求:添加扫描一条数据,无鼠标键盘.工具:扫描枪,动作:扫描两个条码 扫描抢扫描时,扫描出来的数据是显示在当前焦点上,用input的文本框来保存 ...
- php 监听 扫描枪,jquery监听扫码枪获得值
客户一直说 扫码枪要一直获得焦点才能用,用户体验差 ,想做一个 在这个页面 有没有焦点都要获得到值,想了一下 只有用监听的方式了 // 写一个监听扫描枪 事件的方法 var code = ''; va ...
最新文章
- python中idx是什么意思_在python中滚动idxmax()?
- bootstrap4简单使用和入门01-简单表单的使用
- android-NDK-Opengl
- 具有Tron效果的JavaFX 2 Form
- TensorFlow.js:零基础在小程序上实现机器学习
- 中心对称又是轴对称的图形_2020广东省考行测备考:图形推理之对称知多少
- 运维,请警惕脚本灾难!
- GetTickCount
- 新构造运动名词解释_新构造运动
- Ubuntu(Linux)使用微信的方法
- linux用vi使一个段落对齐,12.8 Linux下vi命令和shell学习
- venn.diagram生成pdf图片
- 核磁谱图分析步骤_测试干货|核磁共振好基友MestReNova—手把手教你做出一张核磁谱图...
- 区块链共识算法(4)分布式一致性算法Paxos
- 多因子选股Alpha策略
- 微信扫码登录很难吗?5步帮你搞定
- attr_accessor :motherland 相当于attr_reader:motherland; attr_writer :motherland
- 又在开会……[原文写作时间:2006年6月26日]
- python怎么运用函数_如何在python中使用step函数
- 终端查看本机ip地址