Question

我在模态的底部添加了一个文本区域，自动对焦具有滚动到底部的副作用。没有这种自动对焦将解决此问题。知道发生了什么事。

  <mat-form-field >
      <textarea matTextareaAutosize matInput placeholder="Review Notes" [autofocus]="false" [(ngModel)]="reviewNotes"></textarea>
  </mat-form-field>

“ @角度/材质”：“ ^ 6.4.7”，

Answer 1

控制此的最佳方法是使用MatDialog选项专门用于此目的：对话框配置中的autoFocus选项。例如：

constructor(public dialog: MatDialog) {}
...
openDialog(): void {
  this.dialog.open(MyExampleDialog, {
    autoFocus: false
  });
}

这样做的好处是，如果用户在打开对话框后按Tab键，则“第一个可选项元素”仍会获得焦点。使用tabindex =“-1”可以将该元素放在焦点链的末尾，从而使其难以直观地访问。

Answer 2

来自Angular Material Docs：

默认情况下，对话框中的第一个可Tabable元素将在打开时获得焦点。可以通过在另一个可聚焦元素上设置cdkFocusInitial属性来配置它。

打开对话框后，对话框将自动聚焦第一个可标签元素。

您可以使用tabindex属性控制哪些元素是制表位

鉴于此，您可以将tabindex="-1"属性设置为您不想接收焦点的元素，它将被忽略。

<mat-form-field >
  <textarea matTextareaAutosize tabindex="-1" matInput placeholder="Review Notes" [autofocus]="false" [(ngModel)]="reviewNotes"></textarea>
</mat-form-field>

编辑：如 G的另一个答案所述。 Tranter ，另一种更有用且更合适的方法是在MatDialog的autoFocus: false方法上将openDialog()指定为配置选项，这将使可Tabable元素的行为保持完整，而仅删除最初专注于负载。

此处参考：https://material.angular.io/components/dialog/api#MatDialogConfig

因此openDialog()方法应该是这样的：

openDialog(): void {
   this.dialog.open(MyDialog, {
       autoFocus: false
   });
}

角材质Textarea DONT自动对焦

2 个答案: