扫码枪输入mysql_使用jQuery监听扫码枪输入并禁止手动输入的实现方法
@(知识点总结)[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的调用。
代码很简单,可以直接阅读,有值得改进的地方欢迎指出。
扫码枪输入mysql_使用jQuery监听扫码枪输入并禁止手动输入的实现方法相关推荐
- php 监听条码枪输入,使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)...
基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求 使用扫码枪扫描条码,在一个web页面监听获取扫码枪的数据, ...
- php 监听条码枪输入,使用jQuery监听扫码枪输入并禁止手动输入的实现方法
@(知识点总结)[jquery|扫码抢] 基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求 使用扫码枪扫描条 ...
- jquery 监听input输入停止,实现文本框自动跳转
今天学到了一个新的东西,在此记录一下 我遇到了一个这样的需求:添加扫描一条数据,无鼠标键盘.工具:扫描枪,动作:扫描两个条码 扫描抢扫描时,扫描出来的数据是显示在当前焦点上,用input的文本框来保存 ...
- python读取usb扫码枪_使用jQuery监听扫码枪输入并禁止手动输入的实现方法
基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求 使用扫码枪扫描条码,在一个web页面监听获取扫码枪的数据, ...
- php 监听条码枪输入,运用jQuery监听扫码枪输入并制止手动输入的完成要领
基于jQuery的扫码枪监听.假如只是想完成监听猎取条码扫码信息,能够直接拿来运用,假如有更多的条码推断处置惩罚逻辑须要本身扩大. 一.功用需求 运用扫码枪扫描条码,在一个web页面监听猎取扫码枪的数 ...
- php 监听条码枪输入,jQuery监听扫码枪禁止手动输入的实现方法
本文主要和大家 分享基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展哦,希望能帮助到大家. 一.功能需求 使用扫码枪扫描条码 ...
- php 监听 扫描枪,jquery监听扫码枪获得值
客户一直说 扫码枪要一直获得焦点才能用,用户体验差 ,想做一个 在这个页面 有没有焦点都要获得到值,想了一下 只有用监听的方式了 // 写一个监听扫描枪 事件的方法 var code = ''; va ...
- python监听扫码枪扫描数据
背景:当扫码枪扫描达到输入的数量N时,自动调用打印机打印N个数据的二维码. 实现:因为需要一直监听扫码枪扫描数据的状态,因此创建线程.但是在调试的时候发现,扫码枪扫描的数据并不是一次性出来的,而是一个 ...
- vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...
最新文章
- CE5.0 - romimage.exe如何填充eboot.bin中的pTOC特殊指针生成.nb0
- Hibernate的常用API
- 拒绝做焦虑贩卖者的韭菜
- 旺财速啃H5框架之Bootstrap(五)
- python+OpenCV图像处理(十一)图像轮廓检测
- thinkphp-session与cookie
- html label 两端对齐,如果实现表单的label文字两端对齐
- 后端连接oracle,【后端开发】php怎么远程连接oracle
- Confluence 6 配置索引语言
- Laravel向视图传递变量的两种方法
- NB-IOT:系列专题1:低功耗能力
- HDU3549+Ford-Fulkerson
- 服务器怎么查看c盘大文件在哪里,怎么快速查找系统中的大文件?
- html drag 例子,html drag拖拽事件
- Android10支持ntfs格式u盘
- 洛谷【P1195】口袋的天空
- 商品销售订单综合分析
- poj1753 解题思路
- 上云 企业 过程_企业上云的步骤
- spm,afni的安装和使用心得
热门文章
- android 控件宽度自适应_Android中让图片自适应控件的大小的方法
- securecrt调试c语言程序,SecureCRT脚本编写常用函数之WaitForString
- MySQL的四种事务隔离级别实践
- hdu 6016 Count the Sheep
- 华为C8825D刷机失败解决方法
- 仿新浪微博实现ListBox下拉刷新和到底部自动加载
- Per-FedAvg:联邦个性化元学习
- 全能型AI!用通用预训练感知模型处理多模态多任务!商汤西交港中文提出:Uni-Perceiver...
- 老照片的复活,焕发生机与跃然纸上!这篇CVPR2020的论文彻底火了
- ICCV 2019 | RankSRGAN:排序学习 + GAN 用于超分辨率