Question

作为状态，我在表单容器（mat-form-field）内有输入字段（atm Angular Material）。我尝试在屏幕键盘（简单键盘）上使用自定义。但是，我希望键盘在输入字段聚焦时打开，而在不再聚焦时关闭：

<mat-form-field class="full-width">
    <input matInput placeholder="input"
           type="number" formControlName="inputControl"
           #inputControl
           (focus)="showKeyboard =true"
           (blur)="showKeyboard=false"
    >
  </mat-form-field>
  <app-keyboard [style.display]="showKeyboard ? 'inline' : 'none'" 
                [inputName]="'inputControl'"
                (input)="inputControl.value=$event"></app-keyboard>

问题在于，对于键盘上的触摸（或我不知道）事件，似乎触发了输入字段的blur事件，因此每次击键时都关闭了键盘。

我尝试手动使用focus避免键盘上的click和(focus)="$event.stopImmediatePropagation()"事件冒泡，但这没有任何改变。

Answer 1

我建议将click事件用于移动设备。在输入元素内部单击时，打开键盘，在外部单击时关闭键盘。

  @HostListener('document:click', ['$event']) clickedOutside(ev: any) {
    if (this.elementRef.nativeElement.contains(ev.target)) {
      this.showKeyboard = true;
    } else {
      this.showKeyboard = false;
    }
  }

，而elementRef是您的输入。我希望这会有所帮助。

输入：避免因触摸屏幕键盘而失去焦点

1 个答案: