Question

我在标签标签中有一个输入，并注意到它不允许空格。我尝试了event.stopPropagation();，但它没有用。有解决方法吗？

HTML：

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      Tab Label: 
      <input type="text" (input)="handleInput($event)">
    </ng-template>
    <h1>Tab</h1>
    <p>Try entering a space in the input above</p>
  </mat-tab>
</mat-tab-group>

TS：

handleInput(event: KeyboardEvent): void{
    event.stopPropagation();
  }

Stackblitz ：https://stackblitz.com/edit/angular-dwbjva

Answer 1

使用（keydown）代替（输入）。

Answer 2

我刚刚改变了你的stackblitz。你正在使用错误的方式。试着这样做。

<mat-tab-group>
  <mat-tab label="Tab 1">
      <input type="text" (keyup)="handleInput($event)">
  </mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

Angular Material 2选项卡标签中的输入不允许使用空格

2 个答案: