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 solutio

Answer 1

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

Answer 2

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.

Answer 3

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

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

Answer 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 !

Answer 5

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.

Answer 6

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