How do I auto-hide placeholder text upon focus using css or jquery?
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+ */
<input type="text" placeholder="enter your text" onfocus="this.placeholder = ''"onblur="this.placeholder = 'enter your text'" />
Here is a CSS-only solution (for now, only works in WebKit):
input:focus::-webkit-input-placeholder { opacity: 0;}