角材料输入 |如何使“焦点”布局默认

Posted 2023-02-24

【中文标题】角材料输入 |如何使“焦点”布局默认

【英文标题】：Angular Material input | How to make 'focus' layout default

【发布时间】：2019-03-22 14:01:13

【问题描述】：

我在我的应用程序中使用 Angular Material。 我有这样的输入字段：

<mat-form-field appearance="outline">
  <mat-label>E-mail</mat-label>
  <input matInput placeholder="Indtast e-mail">
</mat-form-field>

生成输入表单：

关注输入表单会触发将输入字段转换为以下布局的动画：

问题：是否可以默认激活“焦点”布局（标签浮动在左上角）？

我们希望显示占位符文本，即使字段没有获得焦点。

【参考方案1】：

您可以将 mat-form-field 的属性floatLabel 设置为“always”：

<mat-form-field appearance="outline" floatLabel="always">
  <mat-label>E-mail</mat-label>
  <input matInput placeholder="Indtast e-mail">
</mat-form-field>

【讨论】：

这只是帮助你显示浮动标签，而不是焦点元素本身。