JQuery Default text on empty text box

Question

I have a email form text box that while it is empty I would like it to have the value "E-Mail" And when you click on it the text goes away. If someone clicks on it and doesn't enter text. on Blur I would like for it to return to having the default text.

I have been trying a few things but nothing is working. Could someone please point me in the right direction?

Answer 1

Or you could just use the placeholder html5 attribute:

<input type="text" id="keyword" name="keyword" placeholder="Type keyword here" />

Answer 2

it goes something like this

$('#yourElement').focus(function(){
    //Check val for email
    if($(this).val() == 'E-Mail'){
        $(this).val('');
    }
}).blur(function(){
    //check for empty input
    if($(this).val() == ''){
        $(this).val('E-Mail');
    }
});

Answer 3

you can use the placeholder attribute and then us this jquery as backup for IE

<input type="text" id="keyword" name="keyword" placeholder="The watermark" value='The watermark' class="watermark"/>

$(document).ready(function () {
    $('.watermark').focus(function () {
        if ($(this).val() == $(this).attr('placeholder')) {
            $(this).val('');
        }
    }).blur(function () {
        if ($(this).val() == '') {
            $(this).val($(this).attr('placeholder'));
       }
    });
});