Javascript 没有输入焦点时捕获输入

Question

我有条码扫描仪。

有时用户希望通过条形码搜索项目。

但是他够懒，根本不想用鼠标点击输入

扫描仪通常输入 8 到 13 个符号的速度非常快，没有人类打字这么快。

这将是完美的解决方案 (1) 检测极端输入，如果页面上没有输入元素具有焦点 (2) 然后 select 具有某些 class 的输入，填充它来自扫描仪的内容并开始搜索。

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

有图书馆吗？

不完美的解决方案是对条形码 reader 进行编程，使每次输入都以某个组合键开始，然后侦听此键并将焦点放在必要的输入上。但这需要其他人的额外工作。

是否可以完美解决？

Answer 1

如果按键的目标不是 [=14]，您可以通过在 input 中填写该键并给予焦点来响应 document 上的 keypress =]:

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">

我很感兴趣地发现，如果我不阻止默认设置，则设置焦点会使 Chrome 在 input 中键入字符（但不是 Firefox）。因此 preventDefault 阻止 Chrome 这样做。

如果您需要支持过时的浏览器，您可能需要尝试使用 keyCode and/or which 而不是使用 key。 MDN 声称 key 支持任何现代 Chrome 或 Firefox 和 IE9+（不支持 Edge）。

Answer 2

在不聚焦表单输入的情况下捕获 IR 扫描的最佳方法是监听 "keypress" 和 "textInput" 事件。

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

防止红外扫描数据进入表单输入也很容易。焦点甚至可以放在输入上，比如数量输入，我仍然可以在不影响数量的情况下捕获 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 IR 扫描仪对此进行了测试。

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

monitorEvents(document.body);

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

为了支持其他类型的 IR 扫描仪，我还为“按键”事件添加了一个侦听器：

    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 没有输入焦点时捕获输入

Javascript catch input when no input has focus

javascript

barcode-scanner