How to remove placeholder on focus [duplicate]

Question

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?

Markswoman

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! – Cuprite

Answer 1

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

Dwyer

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! – Markswoman

If you need i have create a new JSBin: jsbin.com/avIfuDAf/1 – Markswoman

@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 – Dwyer

How can exactly do that in the code you post? Thanks! – Markswoman

Thank you Rohan! Somehow i have missed tour last jsbin.. It works perfectly! – Markswoman

Answer 2

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'" />

Vedavedalia

Nice one! it is working perfectly – Sall

@Vedavedalia this is brilliant.. – Kerrin

Answer 3

CSS worked for me:

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

Nunnally

Best solution for modern browsers. – Storz

Any Solution for FireFox – Matthew

Nilesh: css-tricks.com/almanac/selectors/p/placeholder – Erythema

Answer 4

$("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");
    });
});

Flocky

Answer 5

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'" />

Tiber

Answer 6

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

Veta

Answer 7

Try This hope it helps

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

});

Rescission

Answer 8

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

});

Shuffle

Answer 9

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.

Lorie

Answer 10

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

Sulk