25

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

DEMO

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

1
  • 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
    Commented Oct 30, 2013 at 7:27

10 Answers 10

47

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

5
  • 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! Commented Oct 30, 2013 at 7:31
  • 1
    If you need i have create a new JSBin: jsbin.com/avIfuDAf/1 Commented Oct 30, 2013 at 7: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 jsbin.com/avIfuDAf/3 Commented Oct 30, 2013 at 8:01
  • How can exactly do that in the code you post? Thanks! Commented Oct 30, 2013 at 8:06
  • Thank you Rohan! Somehow i have missed tour last jsbin.. It works perfectly! Commented Oct 30, 2013 at 15:44
37

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'" />
2
  • Nice one! it is working perfectly
    – ackuser
    Commented Mar 30, 2015 at 12:55
  • @C_J this is brilliant..
    – Gass
    Commented Mar 19, 2021 at 16:48
20

CSS worked for me:

input:focus::-webkit-input-placeholder {
    color: transparent;
}
3
1
$("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");
    });
});
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'" />
0
 $('*').focus(function(){
  $(this).attr("placeholder",'');
  });
0

Try This hope it helps

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

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

});
0

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.

0

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.