使用带扫描仪的 Ionic 4 Keypress 事件获取输入值时仅获取前几个字符

Question

我正在实施一个基于 ionic 4 的 iOS 应用，专为 iPad 设计。该应用程序将条形码数据发送到服务器，使用通过蓝牙连接到该应用程序的无线扫描仪进行扫描。为了启用自动保存，我编写了一个 keypress 事件捕获方法，它检测扫描仪上的 "enter" 按键。当它检测到 "enter key" 时，数据会自动发送到后端服务器。

这是我的 html

<ion-item>
          <ion-label position = "floating" class="lab-font">Order/Tracking/UCC No.<ion-note style="color: red">*</ion-note></ion-label>
          <ion-input #order type = "text" text-uppercase formControlName = "order" (ionFocus) = "enableKey()" (ionBlur) = "scanOrder($event)" 
              (ionInput) = "checkRepeat()" (keypress)="handleKeyboardEvent($event)" class="lab-font" required ></ion-input>
        </ion-item>

使用 (keypress)="handleKeyboardEvent($event)"

触发按键

在 Typescript 文件上，我有

 handleKeyboardEvent(event: KeyboardEvent) {
    if(event.key.toLowerCase() === "enter"){
      this.submitOrderSearch(this.order.value);
    }
  }

当我们使用虚拟键盘手动输入时，这非常有效。但是当我们使用扫描仪（无线，蓝牙连接到 iPAD，用作输入设备）并扫描条形码时，当我们调用 submitOrderSearch 方法时，最后几个字符会丢失。

将值绑定到输入字段会有延迟吗？因为扫描仪读取数据的速度非常快，而且我可以看到该方法在扫描仪发出哔哔声后立即检测到回车键。或者我在这里遗漏了什么？

下面是我正在使用的条形码。

Answer 1

现在，我们已经解决了超时问题。我不确定这是否是正确的方法，但就目前而言，没有其他方法是可靠的。

在类型脚本中，我将其更改为

  //Method to handle enter event
  handleScanner(evt){
    setTimeout(() => {
      let value = evt.target.value;
      this.enterEvt = true;
      this.submitOrderSearch(value);
    },800);
  }

并在 HTML

<ion-input #order type = "text" text-uppercase formControlName = "order" 
              (ionInput) = "enableSerialNumbers($event)"  class="lab-font" (keyup.enter)="handleScanner($event)" required ></ion-input>

基本上绑定比事件本身慢一点。因此，稍有延迟可确保该值正确绑定到控件。另一种方法是缓冲按下的键，并在按下回车键时使用缓冲区转换为字符串。

使用带扫描仪的 Ionic 4 Keypress 事件获取输入值时仅获取前几个字符

Getting only first few characters when getting input value using Ionic 4 Keypress event with a scanner

ipad

keypress

ionic4

scanning