Javascript text input fields that display instruction (placeholder) text

Question

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.

Solution 1

You can use watermark plugin in jquery.use this link.

example

 $(this).Watermark("your instructions");

Solution 2

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.

Solution 3

html

<input type="text" id="user" class="textbox default" value="Enter login name">
<input type="password" id="pass" class="textbox">

jQuery

$(function(){
  $('.textbox').focus(function(){
    if (this.value == this.defaultValue) {
        this.value = '';
        $(this).removeClass('default');
    };
  }).blur(function(){
    if (this.value == '') {
        this.value = this.defaultValue;
        $(this).addClass('default');
    };
  });​
});

demo

Comments

[Quentin]

This misses most of the requirements in the question and has accessibility problems.

[Bang Dao]

This won't work. Because after you focus on this field, the instruction text disappear forever

[at.]

I love this idea. The instruction text is also indexable too, which just makes sense. I went with the jQuery watermark plugin though because it was so simple and made the html so clean. For all I know, they implemented this with the same mechanism..

[at.]

love the fading! maybe I'll look into this later

[at.]

As I understand, modernizr only detects whether an html5 feature like placeholder exists in the current browser. It's up to you to provide a fallback mechanism. The jquery library above I chose as the correct answer actually uses html5's placeholder attribute (if you want) and falls back to their javascript mechanism.