无法检测到Android条形码扫描仪输入的键事件，JavaScript

Question

作用域

我试图检测字符输入从条形码扫描仪集成到一个手持安卓设备，在一个简单的网络应用程序使用JavaScript。由于大多数条形码扫描器的行为就像键盘楔，所以我使用检测事件keypress和/或keyup来解释和处理字符输入。

我不希望字符输入填充文本输入，因此我已经将事件处理程序分配给document，但是，我知道我也可以将它分配给window。

样本码

完成任务的示例代码如下所示；这个示例没有区分键盘输入和扫描器输入，但我已经解决了这个问题。

var barcodeString = "";

$(document).keypress(function (event) {
    // If character is carriage-return prevent submit.
    if (event.which === 13) {
        event.preventDefault();
    }
    // Append other characters to barcodeString.
    barcodeString += event.key;
});

问题

我的问题是，许多设备根本不返回任何可读的字符。当我使用event.keyCode监控字符代码时，我会收到两个代码: 229和13。本文关键事件中的W3 keyCode和这个StackOverflow应答用keyCode = 229忽略按键事件可以吗？概述了229号代码意味着输入监视器很忙。我只能假设这要么是因为：

• 条形码扫描器在插入字符时锁定输入监视器。
• 字符输入的速度会导致输入监视器变得太忙，无法检测字符输入。

有趣的是，如果我在将文本扫描到文本输入时检测到event.keyCode，则检测到两个字符代码: 229和13，然后才将文本插入到文本输入中。

设备

我正在尝试实现这一点的设备是由手持组生产的Nautiz X2。和另一个Android设备，我无法识别品牌，但似乎更通用的不同条形码扫描软件。

解决办法

1

手持组确实提供了一个用于与手持扫描仪交互的JavaScript API。其工作方式是为名为: Kiosk浏览器的自定义浏览器提供APK，并实现对特定于那里的扫描仪的JavaScript的解释。文档可以在这里找到(它非常短，不长)：JavaScript扫描仪接口

2

更通用的Android设备能够在扫描仪上输入“慢速”字符，从而使扫描仪与第三方应用程序更兼容。请注意，切换此选项允许我检测字符输入。虽然event.key总是返回代码229 (这次是从不可读字符返回的)，但是String.fromCharCode(event.which)会在一定程度上解决这个问题(它不处理特殊字符)。Nautiz X2没有在软件设置中“慢下来”输入的选项。

3.

我考虑过的另一种解决方法是将文本输入放在带有display: none样式的网页上，以隐藏文本输入，并使用JavaScript不断地设置输入的焦点。I can 尝试监视onChange并处理字符输入。我真的想避免这种做法。

摘要

我提出的解决办法似乎很糟糕，第一种方法不是独立于设备的。我想知道是否有更好的地方“转储”来自条形码扫描仪的文本输入，这样我就可以在我的应用程序中处理它。或者，是否有我可以监视的事件来检测字符输入？

Answer 1

我知道这是晚了，但我正面临一个类似的问题，在一系列设备，包括斑马TC20和Chainway C71。经过大量的搜索，我发现了鲍勃·贾斯的这个令人惊奇的Codepen样本。他已经在代码中记录了他的解决方案，但为了存档，我将在这里重新发布它。链接到他的CodePen

他的解决方案使用隐藏元素将焦点从可见元素更改为可见元素，从而隐藏软android键盘。

​

// whenever the visible field gets focused
$("#visibleField").bind("focus", function(e) {
  // silently shift the focus to the hidden select box
  $("#hiddenField").focus();
  $("#cursorMeasuringDiv").css("font", $("#visibleField").css("font"));
});

// whenever the user types on his keyboard in the select box
// which is natively supported for jumping to an <option>
$("#hiddenField").bind("keypress",function(e) {
  // get the current value of the readonly field
  var currentValue = $("#visibleField").val();
  
  // and append the key the user pressed into that field
  $("#visibleField").val(currentValue + e.key);
  $("#cursorMeasuringDiv").text(currentValue + e.key);
  
  // measure the width of the cursor offset
  var offset = 3;
  var textWidth = $("#cursorMeasuringDiv").width();
  $("#hiddenField").css("marginLeft",Math.min(offset+textWidth,$("#visibleField").width()));
  
});

#hiddenField {
  height:17px; 
  width:1px;
  position:absolute;
  margin-left:3px;
  margin-top:2px;
  border:none;
  border-width:0px 0px 0px 1px;
}

#cursorMeasuringDiv {
  position:absolute;
  visibility:hidden;
  margin:0px;
  padding:0px;
}

#hiddenField:focus {
  border:1px solid gray;  
  border-width:0px 0px 0px 1px;
  outline:none;
  animation-name: cursor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes cursor {
    from {opacity:0;}
    to {opacity:1;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click on the field and type (it should work even though the field isn't really focused): 
<p />

<!-- must be a select box with no children to suppress the keyboard -->
input: <select id="hiddenField" /> 
<span id="fakecursor" />

<input type="text" readonly="readonly" id="visibleField" />
<div id="cursorMeasuringDiv" />

​

我希望这能帮到你。再次感谢鲍勃解决了这个问题！