Fill fields with default values ​​using jQuery

Question

I would like to use jquery to populate fields with default values. For example, let's say I have a field for an email address, and I want to add [e-mail] in the gray italic text in the field and delete it as soon as the user clicks on this field. Is there a good way to do this with a plugin or something else? I would really like to avoid switching an absolutely positioned div if possible.

Answer 1

demonstration

<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;
}

---

demonstration 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');
    }
}​

Answer 2

:. <input>

: http://jsfiddle.net/XTKu8/

HTML

<input id='name' class='italic' value='some name' type='text' />
<input id='email' class='italic' value='[e-mail]' type='text' />

JQuery

$('.italic').each(function() { $(this).data('defaultValue',$(this).val()); })
    .focus(function() {
        var $th = $(this);
        if($th.val() == $th.data('defaultValue'))
            $th.toggleClass('italic').val('');
    })
    .blur(function() {
        var $th = $(this);
        if($th.val() == '')
          $th.toggleClass('italic').val($th.data('defaultValue'));
    });​

---

: http://jsfiddle.net/ZRLK2/

HTML

<input id='email' type='text' />​

JQuery

$('#email').focus(function() {
    var $th = $(this);
    if($th.val() == '[e-mail]') {
        $th.val('')
            .css({'color':'#000','font-style':'normal'});
    }
})
    .blur(function() {
        var $th = $(this);
        if($th.val() == '') {
            $th.val('[e-mail]')
            .css({'color':'#888','font-style':'italic'});
        }
    })
    .val('[e-mail]')
    .css({'color':'#888','font-style':'italic'});​

EDIT: . .

, CSS .addClass() .removeClass(), .toggleClass().

• http://api.jquery.com/addClass/
• http://api.jquery.com/removeClass/
• http://api.jquery.com/toggleClass/

karim79, . :

.italic {
    color:#888;
    font-style:italic;
}

$th.val('')
    .removeClass('italic');

$th.val('[e-mail]')
    .addClass('italic');

Answer 3

<input onfocus="this.select()" type="text" value="[e-mail]" /> 

. , , .

, , .

<input onfocus="this.value=''" type="text" value="[e-mail]" /> 

Answer 4

You can do:

$( "#emailField")
   .val( "[e-mail]")
   .bind( "focus", function(){
        $(this).val("");
   })
   .bind( "onblur", function {
        $(this).val("[e-mail]");
   });

Answer 5

What you describe is exactly what it offers: http://code.google.com/p/jquery-watermark/

 /// Adds the watermark to the text entry areas
var watermarkText = '[e-mail] ';
$(function()
{
    $('.myEmailArea').watermark(watermarkText)
});

EDIT: show CSS example for this example:

.watermark
{
    color: #808080 !important;
}

Answer 6

Use this CSS:

input.defaulted_input {
    color: #999999;
    font-style: italic;
}

And this Javascript:

var email_input = $("#email");
var email_value = email_input.val();
email_input.bind("focus blur", function() {
            if (this.value === email_value) {
                this.value = "";
                email_input.toggleClass("defaulted_input");
            } else if (this.value === "") {
                this.value = email_value;
                email_input.toggleClass("defaulted_input");
            }

        });​

SM: http://api.jquery.com/toggleClass/
SEE: http://jsfiddle.net/KE43P/

Answer 7

You do not need jQuery for something so trivial, excessive.

<input type="text" value="initial value" onfocus="if (this.value=='initial value') this.value=''">