How do I auto-hide placeholder text upon focus using css or jquery?

Question

This is done automatically for every browser except Chrome.

I'm guessing I have to specifically target Chrome.

Any solutions?

If not with CSS, then with jQuery?

Opera is also another browser which removes placeholder on focus. — Lucas, Jul 27 '12 at 07:40
Firefox as of version 15 no longer removes the placeholder text until you start typing. I believe the same may be the case for IE10 but I don't have a way to verify that. — Rob Fletcher, Sep 03 '12 at 17:19
I am concerned that nobody mentioned the fact that you shouldn't bother modifying native browser behaviors. I for one prefer that the placeholder remains present. It just helps me as an end user, and it's a feature that browsers are now starting to implement... probably because the disappear-on-focus behavior proved to be a usability problem. Let the browser be, please. — Ryan Wheale, Jan 11 '13 at 17:38
"This is done automatically for every browser except Chrome." Not anymore? I've just tried this on OSX in Firefox 37.0.2, Safari 7.1.5, and Chrome 42.0. None of them remove the placeholder text until I start typing, and all of them put it back when I clear the field. — Nathan Long, May 05 '15 at 12:51

score 612 · Answer 1 · edited Dec 12 '19 at 23:59

612

Edit: All browsers support now

input:focus::placeholder {
  color: transparent;
}

<input type="text" placeholder="Type something here!">

Firefox 15 and IE 10+ also supports this now. To expand on Casey Chu's CSS solution:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

edited Dec 12 '19 at 23:59

Cristian Ciupitu

20,270
7
50
76

answered Sep 03 '12 at 14:48

Rob Fletcher

8,317
4
31
40

2

Great answer! I don't see much sense in abandoning my old jQuery solution in favor of HTML5 and then go right ahead and add the JavaScript back in as a fix. This is just the solution I was looking for. – nienn Mar 26 '13 at 17:30
@MartinHunt have you tried this on FF? input:focus::-moz-placeholder – Philip May 03 '13 at 09:50
17

Apologies for dredging up an old thread, but just to make this more complete: input:focus:-moz-placeholder is for Firefox 18 and below, for 19 onwards you need to use: input:focus::-moz-placeholder (note the double colon). Ref: http://css-tricks.com/snippets/css/style-placeholder-text/ – Peter Lewis Jul 17 '13 at 08:56
this comment is a win. works with dynamic controls, like kendo too – reflog Feb 11 '15 at 09:39
on printing in chrome doesn't work... any help input[type=text].form-control::-webkit-input-placeholder, input[type=textarea].form-control::-webkit-input-placeholder { color: #FFFFFF; } – Mahdi Alkhatib Nov 11 '15 at 19:03
1

Great answer also from me! For those of us who might also require this functionality when the field is disabled here is the CSS code: /* Hiding the placeholder text (if any), when the holding field is disabled */ input:disabled::-webkit-input-placeholder { color:transparent; } input:disabled:-moz-placeholder { color:transparent; } input:disabled::-moz-placeholder { color:transparent; } input:disabled:-ms-input-placeholder { color:transparent; } – Ramanagom Sep 20 '17 at 14:49
`visibility: hidden` makes more sense to me. Using a transparent color is too hacky. – GetFree Oct 18 '17 at 21:36

score 299 · Accepted Answer · edited Aug 17 '17 at 08:10

299

<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />

edited Aug 17 '17 at 08:10

C.d.

9,932
6
41
51

answered Mar 14 '12 at 17:35

MatuDuke

4,997
1
21
26

2

This makes it go but when I click away from the field it remains blank. – LondonGuy Mar 14 '12 at 17:41
2

@LondonGuy: Just edited my post, see if it works like you wanted. But Toni Michel Caubet solution is nicer – MatuDuke Mar 14 '12 at 17:45
11

The problem here is this is obtrusive JavaScript. Toni Michel Caubet's solution is better. – Silkster Apr 11 '13 at 19:25
I like it, but unfortunately it doesn't work neither IE nor Safari. – Mohammed Moustafa Jun 14 '15 at 07:17
not working. https://stackblitz.com/edit/angular-jd2l6y-frudzk?file=app/table-filtering-example.html – its me Mar 20 '18 at 10:37
Better to [never, ever](https://stackoverflow.com/a/61900807) use inline handlers. They have way too many problems to be worth using nowadays. – CertainPerformance May 20 '20 at 20:56

Casey Chu · Answer 3 · 2012-09-03T17:13:08.740

86

Here is a CSS-only solution (for now, only works in WebKit):

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

edited Sep 03 '12 at 17:13

answered Aug 12 '12 at 08:10

Casey Chu

25,069
10
40
59

2

I like this answer, but the browser support for this just isn't there yet. – Jerry Oct 23 '12 at 15:09
Thank you so much for such an elegant solution that frees you from logic. – al-bulat Mar 31 '21 at 08:35

JamesWilson · Answer 4 · 2020-07-30T23:28:57.053

Pure CSS Solution (no JS required)

Building on @Hexodus and @Casey Chu's answers, here is an updated and cross-browser solution that leverages CSS opacity and transitions to fade the placeholder text out. It works for any element that can use placeholders, including textarea and input tags.

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */
    
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

<div>
  <div><label for="a">Input:</label></div>
  <input id="a" type="text" placeholder="CSS native fade out this placeholder text on click/focus" size="60">
</div>

<br>

<div>
  <div><label for="b">Textarea:</label></div>
  <textarea id="b" placeholder="CSS native fade out this placeholder text on click/focus" rows="3"></textarea>
</div>

Revisions

Edit 1 (2017): Updated to support modern browsers.
Edit 2 (2020): Added the runnable Stack Snippet.

Good old CSS... great simple solution! Why didn't I think of that?? — JI-Web, Oct 16 '19 at 00:18

Toni Michel Caubet · Answer 5 · 2014-12-07T10:49:16.927

have you tried placeholder attr?

<input id ="myID" type="text" placeholder="enter your text " />

-EDIT-

I see, try this then:

$(function () {

    $('#myId').data('holder', $('#myId').attr('placeholder'));

    $('#myId').focusin(function () {
        $(this).attr('placeholder', '');
    });
    $('#myId').focusout(function () {
        $(this).attr('placeholder', $(this).data('holder'));
    });


});

Test: http://jsfiddle.net/mPLFf/4/

-EDIT-

Actually, since placeholder should be used to describe the value, not the name of the input. I suggest the following alternative

html:

<label class="overlabel"> 
    <span>First Name</span>
    <input name="first_name" type="text" />
</label>

javascript:

$('.overlabel').each(function () {
    var $this = $(this);
    var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea');
    var span = $(this).find('> span');
    var onBlur = function () {
        if ($.trim(field.val()) == '') {
            field.val('');
            span.fadeIn(100);
        } else {
            span.fadeTo(100, 0);
        }
    };
    field.focus(function () {
        span.fadeOut(100);
    }).blur(onBlur);
    onBlur();
});

css:

.overlabel {
  border: 0.1em solid;
  color: #aaa;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-height: 2.2em;
}
.overlabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlabel span, .overlabel input {
  text-align: left;
  font-size: 1em;
  line-height: 2em;
  padding: 0 0.5em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none; /* prevent ios styling */
  border-width: 0;
  width: 100%;
  outline: 0;
}

Test:

http://jsfiddle.net/kwynwrcf/

Nice to see the data attribute being used. But I would look at the CSS equivalent. When cached it will be a faster solution and can be global. The above needs the data attribute to be placed on every element needed. (answer below) — Neil, Apr 30 '14 at 18:04
@JGallardo show me the light ( but i'm not sure if you have seen that there are 3 different solutions ) — Toni Michel Caubet, Nov 17 '17 at 13:19

score 19 · Answer 6 · answered Jul 01 '13 at 10:23

19

To augment @casey-chu's and pirate rob's answer, here's a more cross browser compatible way:

    /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }

answered Jul 01 '13 at 10:23

Adrian Föder

770
1
7
22

Exactly what i have written now (instead i used `opacity:0;`)! The only CSS solution in this thread with all possible browser supports! – ReynekeVosz Feb 23 '15 at 09:03

score 12 · Answer 7 · edited Dec 07 '14 at 12:12

12

Toni's answer is good, but I'd rather drop the ID and explicitly use input, that way all inputs with placeholder get the behavior:

<input type="text" placeholder="your text" />

Note that $(function(){ }); is the shorthand for $(document).ready(function(){ });:

$(function(){
    $('input').data('holder',$('input').attr('placeholder'));
    $('input').focusin(function(){
        $(this).attr('placeholder','');
    });
    $('input').focusout(function(){
        $(this).attr('placeholder',$(this).data('holder'));
    });
})

Demo.

edited Dec 07 '14 at 12:12

atiquratik

1,296
3
27
34

answered Jul 26 '12 at 13:29

Wallace Sidhrée

11,221
6
47
58

3

This doesn't work if you have more than one field. Here is enhanced version of your code http://jsfiddle.net/6CzRq/64/ – svlada Jan 29 '14 at 15:07

score 9 · Answer 8 · answered Sep 18 '12 at 08:44

I like to package this up in the name space and run on elements with the "placeholder" attribute...

$("[placeholder]").togglePlaceholder();

$.fn.togglePlaceholder = function() {
    return this.each(function() {
        $(this)
        .data("holder", $(this).attr("placeholder"))
        .focusin(function(){
            $(this).attr('placeholder','');
        })
        .focusout(function(){
            $(this).attr('placeholder',$(this).data('holder'));
        });
    });
};

Mahdi Alkhatib · Answer 9 · 2015-11-12T09:44:34.187

Sometimes you need SPECIFICITY to make sure your styles are applied with strongest factor id Thanks for @Rob Fletcher for his great answer, in our company we have used

So please consider adding styles prefixed with the id of the app container

    #app input:focus::-webkit-input-placeholder, #app  textarea:focus::-webkit-input-placeholder {
        color: #FFFFFF;
    }

    #app input:focus:-moz-placeholder, #app textarea:focus:-moz-placeholder {
        color: #FFFFFF;
    }

score 5 · Answer 10 · answered Dec 02 '18 at 21:47

With Pure CSS it worked for me. Make it transparent when Entered/Focues in input

 input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent !important;
 }
 input:focus::-moz-placeholder { /* Firefox 19+ */
   color: transparent !important;
 }
 input:focus:-ms-input-placeholder { /* IE 10+ */
   color: transparent !important;
 }
 input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;
  }

score 4 · Answer 11 · edited May 23 '17 at 11:54

To further refine Wallace Sidhrée's code sample:

$(function()
{  
      $('input').focusin(function()
      {
        input = $(this);
        input.data('place-holder-text', input.attr('placeholder'))
        input.attr('placeholder', '');
      });

      $('input').focusout(function()
      {
          input = $(this);
          input.attr('placeholder', input.data('place-holder-text'));
      });
})

This ensures that each input stores the correct placeholder text in the data attribute.

See a working example here in jsFiddle.

score 4 · Answer 12 · answered Apr 28 '13 at 18:51

I like the css approach spiced with transitions. On Focus the placeholder fades out ;) Works also for textareas.

Thanks @Casey Chu for the great idea.

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}

textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}

score 4 · Answer 13 · edited Dec 07 '14 at 12:14

4

For a pure CSS based solution:

input:focus::-webkit-input-placeholder  {color:transparent;}
input:focus::-moz-placeholder   {color:transparent;}
input:-moz-placeholder   {color:transparent;}

Note: Not yet supported by all browser vendors.

Reference: Hide placeholder text on focus with CSS by Ilia Raiskin.

edited Dec 07 '14 at 12:14

Cristian Ciupitu

20,270
7
50
76

answered Feb 14 '14 at 20:13

Toran Billups

27,111
40
155
268

score 4 · Answer 14 · answered Jun 15 '15 at 15:44

4

Using SCSS along with http://bourbon.io/, this solution is simple, elegant, and works on all web browsers:

input:focus {
  @include placeholder() {
    color: transparent;
  }
}

Use Bourbon ! It's good for you !

answered Jun 15 '15 at 15:44

Michael

1,357
3
15
24

score 4 · Answer 15 · answered Jun 17 '22 at 06:27

4

Angular any version

Just add this to your .css file

.hide_placeholder:focus::placeholder {
  color: transparent;
}

and use in your input in class

<input class="hide_placeholder"

answered Jun 17 '22 at 06:27

jmp

2,456
3
30
47

score 3 · Answer 16 · answered Sep 27 '13 at 00:14

3

This piece of CSS worked for me:

input:focus::-webkit-input-placeholder {
        color:transparent;

}

answered Sep 27 '13 at 00:14

Alex Bondor

326
1
9

1

That's A nice way of doing it without JQuery :) – tehX Oct 12 '13 at 22:11

score 3 · Answer 17 · answered May 31 '18 at 08:59

2018 > JQUERY v.3.3 SOLUTION: Working globaly for all input, textarea with placeholder.

 $(function(){
     $('input, textarea').on('focus', function(){
        if($(this).attr('placeholder')){
           window.oldph = $(this).attr('placeholder');
            $(this).attr('placeholder', ' ');
        };
     });

     $('input, textarea').on('blur', function(){
       if($(this).attr('placeholder')){
            $(this).attr('placeholder', window.oldph);
         };
     }); 
});

score 3 · Answer 18 · answered May 31 '21 at 05:00

If your input background color is white, then you can set the placeholder text color on focus to match the input background - making the text invisible; theoretically. If you're input is a different color, then just simply change the color to match it.

input:focus::placeholder {
  color: white;
}

Also, you can set the color to "transparent" shown in other answers.

score 3 · Answer 19 · edited Dec 07 '14 at 12:32

3

HTML:

<input type="text" name="name" placeholder="enter your text" id="myInput" />

jQuery:

$('#myInput').focus(function(){
  $(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
  $(this).attr('placeholder','enter your text');
});

edited Dec 07 '14 at 12:32

atiquratik

1,296
3
27
34

answered Mar 14 '12 at 17:46

Uffo

9,628
24
90
154

1

This only assumes one input. – nym Mar 24 '15 at 23:10

Suresh Pattu · Answer 20 · 2012-08-29T06:34:36.103

1

Demo is here: jsfiddle

Try this :

//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
        function(){
            $(this).data('holder',$(this).attr('placeholder'));
            $(this).focusin(function(){
                $(this).attr('placeholder','');
            });
            $(this).focusout(function(){
                $(this).attr('placeholder',$(this).data('holder'));
            });

        });

}

edited Aug 29 '12 at 06:34

answered Aug 29 '12 at 06:11

Suresh Pattu

6,083
16
59
91

use $("input[placeholder]") instead to only select fields that have a placeholder attribute. – Silkster Apr 11 '13 at 19:27
This is the best answer, simple, and deselects the others when out of focus – JGallardo Jan 27 '17 at 01:13

score 1 · Answer 21 · answered May 20 '14 at 05:09

for input

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

for textarea

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }

score 1 · Answer 22 · answered Sep 15 '14 at 22:17

1

$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});

answered Sep 15 '14 at 22:17

OsBen

11
1

score 1 · Answer 23 · answered Feb 28 '15 at 09:53

$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);

    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});

score 1 · Answer 24 · answered May 27 '16 at 03:30

Besides all of above,I have two ideas.

You can add an element that imitates the palceholder.Then using javascript control the element showing and hiding.

But it is so complex,the other one is using the brother's selector of css.Just like this:

.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; }
.send-message input:focus + .placeholder { display: none; }

23333,I have a poor English.Hope solve your problem.

Please check this [URL](http://stackoverflow.com/help) it will be useful to lift your content quality up ; — Willie Cheng, May 27 '16 at 03:51

score 1 · Answer 25 · edited Jan 18 '19 at 05:50

1

No need to use any CSS or JQuery. You can do it right from the HTML input tag.

For example, In below email box, the placeholder text will disappear after clicking inside and the text will appear again if clicked outside.

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">

edited Jan 18 '19 at 05:50

Ali

2,702
3
32
54

answered Jan 18 '19 at 03:10

Saiful Islam

111
1
4

Wael Assaf · Answer 26 · 2016-12-23T16:50:19.143

try this function:

+It Hides The PlaceHolder On Focus And Returns It Back On Blur

+This function depends on the placeholder selector, first it selects the elements with the placeholder attribute, triggers a function on focusing and another one on blurring.

on focus : it adds an attribute "data-text" to the element which gets its value from the placeholder attribute then it removes the value of the placeholder attribute.

on blur : it returns back the placeholder value and removes it from the data-text attribute

<input type="text" placeholder="Username" />

$('[placeholder]').focus(function() {
    $(this).attr('data-text', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
  }).blur(function() {
      $(this).attr('placeholder', $(this).attr('data-text'));
      $(this).attr('data-text', '');
  });
});

you can follow me very well if you look what's happening behind the scenes by inspecting the input element

score 0 · Answer 27 · edited Mar 12 '18 at 07:43

The same thing i have applied in angular 5.

i created a new string for storing placeholder

newPlaceholder:string;

then i have used focus and blur functions on input box(i am using prime ng autocomplete).

Above placeholder is being set from typescript

Two functions i am using -

/* Event fired on focus to textbox*/
Focus(data) {
    this.newPlaceholder = data.target.placeholder;
    this.placeholder = '';
}
/* Event fired on mouse out*/
Blur(data) {
    this.placeholder = this.newPlaceholder;
}

score -1 · Answer 28 · answered Dec 03 '17 at 02:21

-1

/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }

answered Dec 03 '17 at 02:21

maPer77

303
2
5

This answer is identical to a previous answer. If you have something to add or improve, please suggest an edit to the original answer. – JonathanDavidArndt Dec 03 '17 at 02:45

How do I auto-hide placeholder text upon focus using css or jquery?

28 Answers28

Pure CSS Solution (no JS required)

Revisions

Linked

Related