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

Question

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

这是我的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方法时，最后几个字符会丢失。

将值绑定到输入字段是否会有延迟？因为扫描仪会很快读取数据，所以我可以看到该方法会在扫描仪发出哔哔声后立即检测到Enter键。还是我在这里想念东西？

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

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>

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