如何在材料中隐藏占位符onclick [英] How to hide placeholder onclick in material

问题描述

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

I am using simple form-field input component as in below code

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

在输入默认字段时，占位符将位于上方.

On entering the input fieled by default the placeholder will go above.

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

How can i hide the placeholder on entering to the input field?

推荐答案

你可以试试:

DEMO ----> 解决方案

DEMO ----> Solution

您也可以为其创建指令

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

You can replace (click) ----> (focus) as you need

 <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
    }
  }

这篇关于如何在材料中隐藏占位符onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！