Question

我有一台条形码扫描仪，我使用@HostListener捕获并触发请求。问题在于，当触发键盘输入（如条形码扫描仪的输入）时，我单击的最后一声单击。

我一直在寻找答案，但是我所能找到的都是与表单内使用的多余按钮有关的，他们只需要定义type=button就可以避免单击它。

  @HostListener('document:keypress', ['$event'])
  keyEvent(event: KeyboardEvent) {
    if (this.isTimeValid || this.keyTimestamp === null) {
      this.keyTimestamp = Date.now();
      if (event.key === 'Enter' && this.combinedCode !== null) {
        console.log(this.combinedCode);
        this.determineCode(this.combinedCode);
        this.clearCode();
      } else {
        if (this.combinedCode === null) {
          this.combinedCode = event.key;
        } else {
          this.combinedCode = this.combinedCode + event.key;
        }
      }
    } else {
      this.clearCode(event.key);
    }
  }

然后，我的视图中有一个按钮

  <button (click)="addItemDialog()" mat-icon-button>
    <mat-icon aria-label="Add">add</mat-icon>
  </button>

这将打开一个对话框，然后将其关闭。我在视图中单击的最后一个按钮就是该按钮。如果我在单击条形码扫描器之前先使用它，它将重新打开对话框。

我相信此结果是由于W3C标准行为所致。只是想知道是否有一种方法可以为(click)="expression()"覆盖它。

已解决

当条形码event.preventDefault()注册回车时，我需要添加@HostListener。

  @HostListener('document:keypress', ['$event'])
  keyEvent(event: KeyboardEvent) {
    if (this.isTimeValid || this.keyTimestamp === null) {
      this.keyTimestamp = Date.now();
      if (event.key === 'Enter' && this.combinedCode !== null) {
        event.preventDefault();
        console.log(this.combinedCode);
        this.determineCode(this.combinedCode);
        this.clearCode();
      } else {
        if (this.combinedCode === null) {
          this.combinedCode = event.key;
        } else {
          this.combinedCode = this.combinedCode + event.key;
        }
      }
    } else {
      this.clearCode(event.key);
    }
  }

键盘输入时禁用最后单击的单击

0 个答案: