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?

Since that is standard Material Design behavior - I don't think there is an easy way to do that. — fredrik, Aug 09 '18 at 09:32

score 29 · Answer 1 · answered Jan 16 '19 at 11:58

29

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>

answered Jan 16 '19 at 11:58

Learning is a mess

7,479
7
35
71

1

This answer should have been the excepted answer! – fay Jan 07 '21 at 18:11
1

It doesn't hide the placeholder - only disables the float behavior.. – Shaya Jan 20 '21 at 18:47
1

could be just `floatLabel="never"` – Bullsized Jun 15 '23 at 11:14

Akj · Accepted Answer · 2019-05-17T09:35:35.933

19

You can try:

DEMO ----> Solution

You can also create Directive for same

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

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

In TS:

myplaceHolder: string ='Enter Name'

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

edited May 17 '19 at 09:35

answered Aug 09 '18 at 09:36

Akj

7,038
3
28
40

Its working fine only for the first time,When click for the first time placeholder will go but again if i click without refreshing the page placeholder has to display.But it's not. – Shankar Aug 09 '18 at 09:46
you can replace (click) to (focus) if u want – Akj Aug 09 '18 at 10:05
How can i have cancel button to clear the input field?Tried with material input component but it is using ` [(ngModel)]="value` to trigger cancel action ,i am using ` [(ngModel)]` to fetch json data is there any other way? – Shankar Aug 09 '18 at 10:41
if you use reactive form than easily clear the field . if u want to use [(ngModel)] than set control to null – Akj Aug 09 '18 at 10:46
Sorry I didn't get yous answer. – Shankar Aug 09 '18 at 11:00
if you are using reactive form than to clear: this.formGroup.controls.controlName.reset(); if you are using template driven form([(ngModel]) than : this.controlName = null; – Akj Aug 09 '18 at 11:02

score 13 · Answer 3 · edited Aug 09 '18 at 10:06

13

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>

edited Aug 09 '18 at 10:06

Augustin R

7,089
3
26
54

answered Aug 09 '18 at 09:37

Krishna Rathore

9,389
5
24
48

This just makes the label float always, correct? Regardless of whether or not there is a value in the input. OP asked to have the placeholder text be hidden. – matt forsythe Sep 13 '22 at 21:45
use 'never' if you don't want floating – Arash EM Oct 12 '22 at 21:42

score 0 · Answer 4 · answered Apr 05 '20 at 19:07

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

score 0 · Answer 5 · answered Mar 04 '22 at 12:31

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

How to hide placeholder onclick in material

5 Answers5

Linked