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

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?

Kind regards.

Solution 1:

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+ */

Solution 2:

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