如何在材料中隐藏占位符onclick

Question

我正在使用简单的form-field input组件，如下面的代码所示

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

在默认情况下，输入的输入内容为占位符时，占位符将位于上方。

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

Answer 1

您可以尝试：

演示----> Solution

  

您还可以为同一指令创建指令

     

您可以根据需要替换（单击）---->（焦点）

 <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

您可以尝试此解决方案。

使用vm2

我已经在Stackblitz上创建了一个演示

Python version 2.7.8

Answer 3

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

never

Answer 4

这是唯一对我有用的CSS解决方案。

第一个CSS指令用于输入的焦点。

第二个用于输入具有有效值且未聚焦的情况。

.mat-form-field.mat-focused .mat-form-field-label, input.ng-valid+span.mat-form-field-label-wrapper .mat-form-field-label{
    display: none !important;
}