Honeywell EDA 70扫码后JSON无法拆分填充至对应输入框问题

我正在开发一款移动Web应用，使用Honeywell EDA 70扫描QR码时，整个JSON内容被填入单个输入框，无法正确解析并填充到对应字段。查看开发者工具时出现以下错误：

• 12Failed to decode downloaded font:
• 12OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

补充说明 #

我认为这两个错误与QR码扫描无关，仅在触碰输入框时出现。想了解Honeywell设备处理QR码的机制是否会调用默认JavaScript函数，相关JS和HTML代码如下：

JavaScript代码 #

onScan: function QRScan(scannedData) {

    if (!scannedData || !scannedData.data) {
        return;
    }

    if (scannedData && (scannedData.type === 'AZTEC' || scannedData.type === 'QR')) {
        var data;
        try {
            data = JSON.parse(scannedData.data.trim() || '{}');
        } catch (e) {
            alert(e.message);
        }

        this.$('input#fname').val(data.a);
        this.$('input#lname').val(data.b);
        this.$('input#city').val(data.c);
        this.$('input#phone').val(data.d);
        this.$('input#email').val(data.e);
    }
}

HTML代码 #

<!DOCTYPE html>
<html>
<body>

  <h1>Sample HTML</h1>
  <form onsubmit="myFunction()">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="lname">City:</label>
    <input type="text" id="city" name="city"><br><br>
    <label for="lname">Phone:</label>
    <input type="text" id="phone" name="phone"><br><br>
    <label for="lname">Email:</label>
    <input type="text" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
  </form>

</body>
</html>

1. 解决扫描内容直接填入输入框的核心问题 #

Honeywell EDA 70默认会把扫描到的内容模拟键盘输入到当前聚焦的输入框，这就是你看到整个JSON被填入单个字段的原因——扫描时某个输入框处于激活状态，设备直接触发键盘输入行为，根本没调用你的onScan函数。

解决思路有两种：

• 禁用设备默认输入行为：在Honeywell设备的扫描设置里，找到“数据输出”“键盘仿真”类选项，关闭扫描后自动输入到焦点框的功能；或者使用Honeywell官方Web SDK（如Data Collection SDK）接管扫描事件。
• 拦截输入事件处理：如果无法修改设备设置，可在页面监听输入事件，检测到完整JSON时手动解析填充：

document.addEventListener('input', function(e) {
  const inputVal = e.target.value;
  try {
    const data = JSON.parse(inputVal.trim());
    // 验证是否为预期的JSON结构
    if (data.a && data.b) {
      e.preventDefault();
      // 填充对应字段
      document.getElementById('fname').value = data.a;
      document.getElementById('lname').value = data.b;
      document.getElementById('city').value = data.c;
      document.getElementById('phone').value = data.d;
      document.getElementById('email').value = data.e;
      // 清空当前输入框内容
      e.target.value = '';
    }
  } catch (err) {
    // 非目标JSON结构，不做处理
  }
});

2. 确认onScan函数的绑定有效性 #

Honeywell设备不会自动调用自定义的onScan函数，必须通过官方SDK或正确监听设备扫描事件才能触发：

• 检查是否引入Honeywell Web SDK；
• 确认已正确注册扫描事件监听器，示例：

// 基于Honeywell SDK绑定扫描事件
if (typeof HoneywellScanner !== 'undefined') {
  const scanner = new HoneywellScanner();
  scanner.on('scan', function(scannedData) {
    QRScan(scannedData);
  });
}

3. 字体错误处理 #

如你判断，字体错误与扫描无关，是浏览器解析WOFF2字体文件失败导致：

• 检查字体文件是否损坏，重新替换完整的字体文件；
• 给字体声明添加降级方案，避免单一格式依赖：

@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2'),
       url('custom-font.woff') format('woff'),
       url('custom-font.ttf') format('truetype');
}

内容的提问来源于stack exchange，提问作者DNép