web-dev-qa-db-ja.com

マテリアルでプレースホルダーonclickを非表示にする方法

以下のコードのように、単純なform-field inputコンポーネントを使用しています

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

デフォルトで入力された入力を入力すると、プレースホルダーが上に移動します。

enter image description here

入力フィールドに入力するときにプレースホルダーを非表示にするにはどうすればよいですか？

angularangular-materialangular6
11
Shankar

あなたが試すことができます：

デモ----> ソリューション

同じためのディレクティブを作成することもできます

必要に応じて（クリック）---->（フォーカス）を置き換えることができます

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

入力フィールドが空でないときにプレースホルダーを非表示にする方法を探しているときにこの質問に遭遇しました。私が見つけた解決策は、クリシュナの修正であり、mat-form-fieldfloatLabelからalwaysへのnever引数：

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

このソリューションを試すことができます。

使用する [floatLabel]="'always'"

Stackblitz でデモを作成しました

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