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

Question

范围

我正在尝试使用JavaScript在一个简单的Web应用程序中检测手持Android设备集成的条码扫描器的字符输入。由于大多数条码扫描器的行为类似于键盘楔子，因此我使用检测事件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 in key events 和这个 StackOverflow 回答 Is it OK to ignore keydown events with keyCode = 229? 概述了 229 代码意味着输入监视器正在忙碌。我只能假设这是因为：

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

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

设备

我试图在 Nautiz X2（由 Handheld Group 制造）和另一台 Android 设备上实现此功能，但我无法确定该设备的品牌，但似乎更通用，带有不同的条形码扫描软件。

解决方法

1

Handheld Group 提供了一个 JavaScript API 与 Handheld 扫描仪进行交互。它的工作方式是他们为自定义浏览器命名为 Kiosk Browser 提供一个 APK，并在那里实现特定于扫描仪的 JavaScript 解释。文档可以在此处找到（非常简短，阅读时间不长）：JavaScript Scanner Interface

2

更通用的 Android 设备具有“减慢”扫描仪字符输入的功能，以使扫描仪与第三方应用程序更兼容。这样做可以让我检测到字符输入。虽然 event.key 总是返回代码 229（这次来自无法读取的字符），但 String.fromCharCode(event.which) 将在一定程度上解决问题（它不能处理特殊字符）。Nautiz X2 在软件设置中没有“减慢”输入的选项。

3

我考虑的另一种替代方法是将文本输入放置在具有样式 display: none 的网页上以隐藏它，并使用 JavaScript 不断将焦点设置在输入上。然后我可以“尝试”监视 onChange 并处理字符输入。我真的想避免这种方法。

总结

我提出的解决方法似乎很糟糕，第一个方法也不具备设备无关性。我在想是否有更好的方式来“倾倒”条形码扫描器输入的文本，以便我可以在我的应用程序中处理它？或者，是否有事件可以监视以检测字符输入？

- dkmann

---

你解决过这个问题å�—？😀我ç�°åœ¨æ­£é�‡åˆ°è¿™ä¸ªç¡®åˆ‡çš„问题。你æ��供的所有解决方法都ä¸�å�¯è¡Œã€‚ä¸�æ–­è�šç„¦è¾“入（workaround3）会导致扫æ��仪上打开安å�“软键盘。 - Kasper Sølvstrøm

Answer 1

我知道现在有点晚了，但我面临一个类似的问题，涉及到一系列设备，包括 Zebra TC20 和 Chainway C71。我花了很多时间搜索，最终发现了 Bob Jase 的 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" />

希望这能有所帮助。再次向Bob致敬，他解决了这个问题！

- Valcho