禁用 mdInput 文本字段的浮动

Question

在 Angular 4（材质）应用程序中，我有一个用于搜索的文本字段。当我在字段中输入内容时，会出现第二个字段，显示输入的文本。当我滚动页面时，这个新字段会浮动。如何禁用浮动行为？

这似乎不是文本字段的默认行为。我已经尝试过

md-no-float

，但那是针对我理解的占位符文本。有人建议设置一个空的

value

，所以我添加了它，但问题仍然存在。

<md-input-container md-no-float style="width: 100%">
      <input mdInput formControlName="search" value="" placeholder="Search Terms" />
</md-input-container>

Answer 1

根据 @angular/material2 的 6.4.5 版本，您可以使用

floatLabel

输入属性控制浮动标签，如您在其 浮动标签文档中看到的那样。

<mat-form-field [floatLabel]="'never'">

Answer 2

<md-input-container [floatPlaceholder]="'never'">

这帮助我隐藏浮动占位符

编辑：自 Angular Material 6 开始

<mat-form-field floatPlaceholder="never">

Answer 3

只需删除占位符属性

<input matInput placeholder="Input">

到

<input matInput >

Answer 4

对于最新版本，如果你不想浮动

label

，就不要通过

mat-label

提供。只添加

placeholder

:

<mat-form-field>
 <!-- <mat-label>Amount</mat-label> ### Removed through comment for example -->
  <input matInput placeholder="Simple placeholder">
</mat-form-field>

Answer 5

根据最新文档https://material.angular.io/components/form-field/overview#floating-label，现在是

hideRequiredMarker

<input matInput hideRequiredMarker placeholder="Email" required>

Answer 6

原来是 Chrome 自动完成功能弹出。

如果您将

autocomplete="off"

添加到表单和输入字段，它将消失。