假设我有两个文本框:
<input type="text"id="resourceName" placeholder="Resource name"/>
<input type="text" id="barCode" placeholder="barCode(EAN-13)"/>
要填充此文本框,我使用条形码扫描仪和键盘。我想要的是有点困难,我不知道如何做到这一点。我无法区分当用户填充文本框与键盘和条形码时。我需要这个,因为我想实现类似的东西:当用户使用条形码扫描仪时,如果我们没有焦点文本框,我希望焦点条形码文本框并在此文本框中插入此值,当焦点是resourceName文本框时,我希望首先焦点条形码文本框,然后在此文本框中插入此值。我不希望用户使用条形码扫描仪在resourceName文本框中插入条形码。问题是我无法区分事件,用户是如何填充文本框的?使用条形码扫描仪或使用键盘。任何帮助将不胜感激。非常感谢
5条答案
按热度按时间eqqqjvef1#
看一看github jQuery-Scanner-Detection
NPM Package jQuery-Scanner-Detection
jQuery Scanner Detection是一个小插件,用于检测用户何时使用扫描仪(条形码、QR码...)而不是键盘,并调用特定回调。
j8ag8udp2#
根据我在评论中提出的想法,我想出了这个...
它会保存一个最后13个按键的缓冲区,如果只是数字,它会假设这是一个条形码,并触发
barcodeEntered
函数。这显然是一个黑客攻击,并假设没有人会在页面的其他地方输入13位数字(但如果某些字段有焦点等,你可以让它忽略按键)。它捕捉页面上的所有按键,无论焦点如何,所以它应该捕捉你扫描条形码,即使没有任何东西有焦点。
**编辑:**我按照@DenisBorisov的建议,在键盘缓冲区中添加了
.trim()
,这样空格就可以忽略。zqry0prt3#
看一下jQuery的keypress事件
将它绑定到输入框,当用户使用键盘输入条形码时,它会提醒您
还有,你看过this question吗?
zaqlnxep4#
尝试了所有的解决方案,但没有像预期的那样工作。我发现非常简单的解决方案onscaniderjs我有应用程序使用Angular 8。
非常简单,很好的实现。
对于Angular 8,我遵循以下步骤:
2.open angular.json,将一个条目添加到脚本数组中,如“节点_模块/onscan. js/onscan. min. js”
3.在组件类中实现接口AfterViewInit
最好的事情是扫描的文本出现在focued文本框元素
vmdwslir5#
基于@Reinstate Monica Cellio的回答,我想出了这个例子,它对我和我的条形码扫描仪都很有效。我不能限制输入13个字符,因为它是一个2D扫描仪,也必须扫描包含文本和不同长度的S/N QR码。