CODEWITHSUNDEEP
htmlcss
Ben Davidow
Ben Davidow

Reputation: 1215

Placeholder doesn't disappear when input field in focus

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

Upvotes: 5

Views: 28957

Answers (4)

Hashim Aziz
Hashim Aziz

Reputation: 6165

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.

Upvotes: 0

Gass
Gass

Reputation: 9402

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

Upvotes: 2

SwankyLegg
SwankyLegg

Reputation: 473

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.

Upvotes: 3

chiliNUT
chiliNUT

Reputation: 19582

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/

Upvotes: 9

Related Questions