How to remove placeholder on focus

Question

I made this simple function to add placeholder in browsers that do not support it:

The question is: How can I add to that function the possibility to remove the placeholder when the user click inside it?

Why you are using place holder for this one you can use blur also placeholder is the inbuilt attributes of browser ie does not support this remeber! — Just code, Oct 30 '13 at 07:27

Rohan Kumar · Accepted Answer · 2015-08-12T04:27:23.663

46

Try to use removeAttr() like,

$('input,textarea').focus(function(){
   $(this).removeAttr('placeholder');
});

Demo

To get the placeholder value again on blur() try this,

$('input,textarea').focus(function(){
   $(this).data('placeholder',$(this).attr('placeholder'))
          .attr('placeholder','');
}).blur(function(){
   $(this).attr('placeholder',$(this).data('placeholder'));
});

Demo 1

edited Aug 12 '15 at 04:27

answered Oct 30 '13 at 07:19

Rohan Kumar

40,431
11
76
106

Thank you Rohan. It is working properly in Chrome. Altough is not working in Explorer (v. 8), that is where mostly i need this function. Do you know how can i do to make this code working also on Explorer 8? Thank you! – FrancescoMussi Oct 30 '13 at 07:31
1

If you need i have create a new JSBin: http://jsbin.com/avIfuDAf/1 – FrancescoMussi Oct 30 '13 at 07:34
1

@johnnyfittizio this is because `placeholder` not works in `IE 8`, for this you have to set `value` of your `elements` on `focus and blur` See demo http://jsbin.com/avIfuDAf/3 – Rohan Kumar Oct 30 '13 at 08:01
How can exactly do that in the code you post? Thanks! – FrancescoMussi Oct 30 '13 at 08:06
Thank you Rohan! Somehow i have missed tour last jsbin.. It works perfectly! – FrancescoMussi Oct 30 '13 at 15:44

score 36 · Answer 2 · answered Sep 05 '14 at 23:49

36

There is no need to use javascript function to accomplish this, a simpler solution is:

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

answered Sep 05 '14 at 23:49

C_J

404
4
6

Nice one! it is working perfectly – ackuser Mar 30 '15 at 12:55
@C_J this is brilliant.. – Gass Mar 19 '21 at 16:48

mintedsky · Answer 3 · 2017-08-22T22:14:53.820

20

CSS worked for me:

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

edited Aug 22 '17 at 22:14

answered Jul 25 '14 at 08:18

mintedsky

1,073
13
18

2

Best solution for modern browsers. – JohnA10 Jan 15 '15 at 06:33
Any Solution for FireFox – nilesh Dec 23 '15 at 07:03
2

Nilesh: https://css-tricks.com/almanac/selectors/p/placeholder/ – Mike Kormendy Jul 11 '16 at 00:19

score 1 · Answer 4 · answered Feb 28 '15 at 09:56

$("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 5 · answered Aug 12 '15 at 04:38

1

A very simple and comprehensive solution for this is which works in Mozila, IE, Chrome, Opera and Safari:

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

answered Aug 12 '15 at 04:38

Saani

791
7
28
68

score 0 · Answer 6 · answered Oct 30 '13 at 07:20

0

 $('*').focus(function(){
  $(this).attr("placeholder",'');
  });

answered Oct 30 '13 at 07:20

Ankit Tyagi

2,381
10
19

score 0 · Answer 7 · answered Oct 30 '13 at 07:25

0

Try This hope it helps

$('input,textarea').focus(function()
{
$(this).attr('placeholder','');

});

answered Oct 30 '13 at 07:25

Sridhar R

20,190
6
38
35

score 0 · Answer 8 · answered Oct 30 '13 at 07:27

0

$('input').focus(function()
{
  $(this).attr('placeholder','');

});

answered Oct 30 '13 at 07:27

vikaskimt

56
6

score 0 · Answer 9 · answered Oct 30 '13 at 07:39

For browsers that don't support placeholder you can use this: https://github.com/mathiasbynens/jquery-placeholder. Add the placeholder attribute normally as for HTML5, then call this plugin: $('[placeholder]').placeholder();. Then use Rohan Kumar's code and will be cross-browser.

score 0 · Answer 10 · answered Jan 28 '16 at 10:28

This is my solution on click not on focus:

$(document).on('click','input',function(){
    var $this = $(this);
    var place_val = $this.attr('placeholder');
    if(place_val != ''){
        $this.data('placeholder',place_val).removeAttr('placeholder');
    }
}).on('blur','input',function(){
    var $this = $(this);
    var place_val = $this.data('placeholder');
    if(place_val != ''){
        $this.attr('placeholder',place_val);
    }
});

How to remove placeholder on focus

10 Answers10