空文本框上的JQuery默认文本

Question

我有一个电子邮件表单文本框,虽然它是空的我希望它有值"电子邮件"当你点击它时文本消失了.如果有人点击它并且没有输入文字.在模糊我希望它返回到默认文本.

我一直在尝试一些事情,但没有任何工作.有人可以指点我正确的方向吗？

Answer 1

或者您可以使用占位符html5属性:

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

Answer 2

它就是这样的

$('#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

您可以使用占位符属性,然后使用此jquery作为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'));
       }
    });
});

Answer 4

这非常简单。只需删除该值onfocus，然后（如果该值仍然为空）重新填充它onblur。