Javascript text input fields that display instruction (placeholder) text

javascript jquery forms input textfield
at. picture at. · Aug 10, 2010 · Viewed 12.1k times · Source

What's the best way to have a text input field that displays instructions of what to enter in that field in gray. When you focus on that input field, the gray instruction text disappears and your input text appears black. If you erase your input text and focus away from that input, then the instruction gray text reappears.

I've tried implementing this with jQuery, but I get all kinds of weird issues with different browsers. Sometimes when you go back a screen, the instruction text becomes black and no longer disappears, issues like that.

Is there a standard javascript library for this? I can't find any!

Oh, and the instruction text can't be an image because it has to be available in different languages depending on the browser's language preference.

Answer

autonomatt picture autonomatt · Aug 19, 2011

You don't need javascript for this.

HTML5:

<input type="text" id="email" name="email" placeholder="Enter your email address">

This works in modern browsers. If you add modernizr.js to your page then it'll work in all browsers.

Related questions

How to get the containing form of an input?

I need to get a reference to the FORM parent of an INPUT when I only have a reference to that INPUT. Is this possible with JavaScript? Use jQuery if you like. function doSomething(element) { //element is input object //how …

Read More
How do I use jQuery's form.serialize but exclude empty fields

I have a search form with a number of text inputs & drop downs that submits via a GET. I'd like to have a cleaner search url by removing the empty fields from the querystring when a search is performed. …

Read More
jQuery AJAX submit form

I have a form with name orderproductForm and an undefined number of inputs. I want to do some kind of jQuery.get or ajax or anything like that that would call a page through Ajax, and send along all the …

Read More