Question

I would like to use jquery to populate fields with default values. For example, say I have a field for email address and I want to add [e-mail] in grey italic text in the box and the remove it once the user clicks on the field. Is there any good way to do this with a plugin or something? I would really like to avoid toggling an absolutely positioned div if possible.

Answer 1

demo

<input type="text" id="email" />
<input type="text" id="name" /> 

then,

$(function(){
   $('#email').focus(focus).blur(blur)[0].defaultValue="[e-mail]";
   $('#name').focus(focus).blur(blur)[0].defaultValue="Type name here";
})

function focus(){
   this.value = (this.value == this.defaultValue)?'':this.value;
}
function blur(){
   this.value = (this.value == '')?this.defaultValue:this.value;
}

---

demo with styles

$(function(){
    $('#email, #name').addClass('default');
    $('#email').focus(focus).blur(blur)[0].defaultValue="[e-mail]";
    $('#name').focus(focus).blur(blur)[0].defaultValue="Type name here";
});

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