How to hide placeholder onclick in material

Question

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?

Answer 1

I came into this question when looking for a way of hiding the placeholder when the input field is not empty, the solution I found is a modification of Krishna's, replacing the mat-form-field floatLabel argument from always to never:

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

Answer 2

you can try this solution.

use [floatLabel]="'always'"

I have create a demo on Stackblitz

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

Answer 3

This is a only-CSS solution that worked for me.

The first CSS directive is for when the input is focused.

The second is for when the input has a valid value and is not focused.

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

Answer 4

First, you can make appearance="outline" for your form field and instead of adding placeholder in <mat-label>, you can add placeholder property in input which will disable floating effect on input click.

HTML:

<mat-form-field class="form-field" appearance="outline">
    <input matInput placeholder="Enter your full name">
</mat-form-field>

---

Then, to hide the placeholder on click:

CSS:

.mat-input-element:focus::placeholder {
    color: transparent;
}