Placeholder doesn't disappear when input field in focus

Question

The placeholder value of each input field on a form should disappear when the user selects the field, but it does not. Doctype is HTML5.

http://dailyspiro.com/index.html

<input required type="text" name="user-first-name" id="user-first-name" placeholder="First Name" class="text ui-widget-content ui-corner-all decorative-icon icon-user" />

What browser/OS are you on? No problems here on OSX 10.9.2 with Safari 7.0.2. — , Mar 16 '14 at 00:01
http://sridharkatakam.com/make-search-form-input-box-text-go-away-focus-genesis/ the normal behavior is for the text go away when you start typing, not click. any number of JS/CSS tricks can add the ability to disappear on focus. — chiliNUT, Mar 16 '14 at 00:03
The `placeholder` will display as long as the `value` is empty, not just on focus. Type something into the field and it should hide. — Jonathan Lonowski, Mar 16 '14 at 00:03
Possible duplicate of [How do I auto-hide placeholder text upon focus using css or jquery?](http://stackoverflow.com/questions/9707021/how-do-i-auto-hide-placeholder-text-upon-focus-using-css-or-jquery) — Wallace Sidhrée, Oct 04 '16 at 10:55

score 8 · Answer 1 · answered Mar 16 '14 at 00:05

8

CSS

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */

see here http://sridharkatakam.com/make-search-form-input-box-text-go-away-focus-genesis/

answered Mar 16 '14 at 00:05

chiliNUT

18,989
14
66
106

1

Ahh. Sorry! Kinda duped your answer from that article. Good read nonetheless! – SwankyLegg Mar 16 '14 at 00:32

score 3 · Answer 2 · answered Mar 16 '14 at 00:30

You can achieve the same thing with a little js. Not sure if you're looking or a plain HTML. @chiliNUT's option should work for you. Anyway, since I'm not totally clear on what you want...

Here are 2 options:

<input required type="text" name="user-first-name" id="user-first-name" class="your list of class names" placeholder="First Name" onfocus="if(this.value == 'First Name') { this.value = ''; }" value="First Name"/>

<input required type="text" name="user-first-name" id="user-first-name" class="your list of class names" onfocus="if(this.value == 'First Name') { this.value = ''; }" value="First Name"/>

And the obligatory fiddle.

score 2 · Answer 3 · answered Jun 11 '21 at 10:06

2

You can use onfocus and onblur events directly into the HTML input tag

<input onfocus="this.placeholder = ''" onblur="this.placeholder = 'click me'" placeholder="click me"/>

For more info and examples click here

answered Jun 11 '21 at 10:06

Gass

7,536
3
37
41

score 0 · Answer 4 · answered Jun 13 '23 at 00:19

Surprised no-one's mentioned the simplest way to do this:

<input type="text" placeholder="Your Name" onfocus="this.placeholder=''" onblur="this.placeholder='Your Name'"

The onblur is only necessary if you want to restore the original placeholder after the user clicks away from the input.

Placeholder doesn't disappear when input field in focus

4 Answers4

Linked