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

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

我很好奇地发现,如果我没有阻止默认设置,设置焦点使Chrome键入input(但不是Firefox)中的字符.因此,preventDefault要阻止Chrome这样做.

如果您需要支持过时的浏览器,您可能需要做一些游戏keyCode和/或which而不是使用key.MDN声称key支持任何现代Chrome或Firefox和IE9 +(不代表Edge).