Question

我有条形码扫描仪。

有时用户想要按条形码搜索商品。

但他很懒，并且根本不想使用鼠标点击输入。

扫描仪通常可以非常快速地输入8到13个符号，没有人类类型这么快。

这将是（1）检测极端输入的完美解决方案，如果页面上没有输入元素具有焦点（2）然后选择具有特定类别的输入，则用扫描仪中的内容填充它并开始搜索。

第二阶段没有问题。我不知道如何从第一阶段开始。

有没有图书馆？

不完美的解决方案是编程条形码阅读器开始每次进入一些组合键并听取此键并将注意力集中在必要的输入上。但这需要其他人的额外工作。

是否可以获得完美的解决方案？

Answer 1

如果按键目标不是keypress，您可以在document上填写input中的input来回复document.addEventListener("keypress", function(e) { if (e.target.tagName !== "INPUT") { var input = document.querySelector(".my-input"); input.focus(); input.value = e.key; e.preventDefault(); } });并注明焦点：

<input type="text" class="my-input">

input

我很好奇地发现，如果我没有阻止默认设置，那么设置焦点会使Chrome键入preventDefault（但不是Firefox）中的字符。因此keyCode阻止Chrome执行此操作。

如果您需要支持过时的浏览器，则可能需要使用which和/或key而不是使用key。 MDN声称{@ 1}}支持任何现代Chrome或Firefox和IE9 +（不代表Edge）。

Answer 2

在不关注表单输入的情况下捕获IR扫描的最佳方法是侦听“keypress”和“textInput”事件。

document.addEventListener('textInput', function (e){
    console.log('textInput', e.data)
});

还可以轻松防止IR扫描数据进入表单输入。焦点甚至可以是输入，比如数量输入，我仍然可以捕获IR UPC代码而不影响数量。

document.addEventListener('textInput', function (e){
    if(e.data.length >= 6){
        console.log('IR scan textInput', e.data);
        e.preventDefault();
    }
});

我在Android 4.4和7.0上使用CipherLab红外扫描仪对此进行了测试。

并非所有红外扫描仪都会触发'textInput'事件。如果您的设备没有，那么您可以检查它是否发出类似的东西：

monitorEvents(document.body);

使用它，触发IR扫描。您应该看到您必须使用的所有事件的控制台日志。在这里找到了这个监控技巧：How do you log all events fired by an element in jQuery?

为了支持其他类型的红外线扫描仪，我还为“按键”事件提供了一个监听器：

    let UPC = '';
    document.addEventListener("keypress", function(e) {
        const textInput = event.key;
        const targetName = event.target.localName;
        let newUPC = '';
        if (textInput && textInput.length === 1 && targetName !== 'input'){
            newUPC = UPC+textInput;

           /**
           * Checks if at least 6 characters are entered then submit the UPC
           */
          if (newUPC.length >= 6) {
            this.submit();
          } 
       }
    }

当没有输入具有焦点时，Javascript捕获输入

2 个答案: