Angular 2 Material输入框默认焦点移除

Question

我有一个带有文本输入、单选按钮、确定和取消的对话框。当对话框打开时，光标闪烁在文本输入框内，这意味着占位符文本已经缩小且难以阅读。占位符文本是类似于“在此框中描述问题的详细信息”的内容。如何在Angular 2中删除默认自动聚焦？即使可以通过某种方式使占位符不缩小，也可以解决问题。请给予建议。使用angular材料控件。

- Gullu

Answer 1

在dialog.open()组件后传递的配置对象中，您可以将autofocus属性设置为false。请保留HTML标记。

this.dialog.open(SomeComponent, {
  width: '100px',
  data: {},
  autoFocus: false
})

- Mitch McCutchen

---

无法工作。没有错误。将尝试创建一个 StackBlitz。 - Gullu

@Gullu 只需要按照上述给出的方法添加 autoFocus: false 就可以很好地解决打开对话框的问题了。 - Sanal S

Answer 2

另一个解决方案是将对话框的输入tabindex设置为-1。

<button tabindex="-1" #closeAuthPanelButton mat-icon-button>
  <mat-icon (click)="emitAuthPanelClose()">close</mat-icon>
</button>

- fame