如何隐藏占位符onclick in material

Question

我使用简单的form-field input组件,如下面的代码

<mat-form-field class="example-form-field" >
     <input matInput type="search" placeholder="Search"  >
</mat-form-field>

在输入默认输入的输入时,占位符将在上方.

如何在输入到输入字段时隐藏占位符？

Answer 1

你可以试试:

DEMO ----> 解决方案

您也可以为其创建指令

您可以根据需要替换(单击)---->(焦点)

 <mat-form-field floatLabel=never>
     <input (click)="checkPlaceHolder()" (blur)="checkPlaceHolder()" matInput placeholder=" {{myplaceHolder}} ">
 </mat-form-field>

在TS中:

myplaceHolder: string ='Enter Name'

 checkPlaceHolder() {
    if (this.myplaceHolder) {
      this.myplaceHolder = null
      return;
    } else {
      this.myplaceHolder = 'Enter Name'
      return
    }
  }

Answer 2

我在寻找一种在输入字段不为空时隐藏占位符的方法时遇到了这个问题，我找到的解决方案是对Krishna的修改，将mat-form-field floatLabel参数from 替换always为never：

<div class="example-container">
  <mat-form-field
      [floatLabel]="'never'">
    <input matInput placeholder="Simple placeholder" required>
  </mat-form-field>
</div>

Answer 3

你可以尝试这个解决方案.

使用 [floatLabel]="'always'"

我在Stackblitz上创建了一个演示

<div class="example-container">
  <mat-form-field
      [floatLabel]="'always'">
    <input matInput placeholder="Simple placeholder" required>
  </mat-form-field>
</div>