javascript - 无法检测 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 解决了这个问题!