无法检测 Android Barcode Scanner 输入、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，然后仅将文本插入到文本输入中.

设备

我尝试在其上实现此功能的设备是 Handheld Group 制造的 Nautiz X2。还有另一台 Android 设备，我无法识别其品牌，但使用不同的条码扫描软件似乎更通用。

解决方法

1

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

2

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

3

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

总结

我提出的解决方法看起来很糟糕，而且第一种方法与设备无关。我想知道是否有更好的地方从条形码扫描仪“转储”文本输入，以便我可以在我的应用程序中处理它？或者，是否有可以监控的事件来检测字符输入？

Answer 1

我知道这已经晚了，但我在使用包括 Zebra TC20 和 Chainway C71 在内的一系列设备时遇到了类似的问题。经过大量搜索后，我发现了 Bob Jase 的这个惊人的 Codepen 示例。他已经在代码中记录了他的解决方案，但我将在此处重新发布以进行存档。 link to his 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 解决了这个问题！