mat-input 中的占位符位置

Posted 2023-03-05

【中文标题】mat-input 中的占位符位置

【英文标题】：placeholder loaction in mat-input

【发布时间】：2019-02-27 08:35:07

【问题描述】：

我正在使用 angular6 和 angular 材料来创建这个整洁的网站。

我将mat-form-field 与mat-input 一起使用，因此显示带有placeholder 文本的文本输入元素。

占位符文本位置有两种状态。

一个！当文本输入为空并且您没有专注于该元素时：

当您专注于输入文本和/或您输入文本不为空时

我希望 mat-input 元素处于第二状态。在文本输入元素上方显示占位符，即使其中没​​有文本并且我没有关注该元素。

我知道我可以做一个变通方法并为元素的值添加某种空白空间。但是有没有更优雅的方式来实现我需要的东西？

谢谢！！！

【参考方案1】：

你可以使用floatLabel="always"，这是mat-form-field的输入属性绑定

<mat-form-field style="width: 100%" floatLabel="always">
  <input matInput placeholder="Enter Name">
</mat-form-field>

工作Stackblitz