jQuery默认文本在空白文本框中

Question

我有一个电子邮件表单文本框，当它为空时，我希望它具有值“ E-Mail”。当您单击它时，文本消失。 如果有人单击它并且不输入文本。 在“模糊”上，我希望它恢复为默认文本。

我一直在尝试一些事情，但是没有任何效果。 有人能指出我正确的方向吗？

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 。

Answer 5

使用此Jquery-placeholder插件

使用此插件可以在不支持HTML5的浏览器中使用占位符属性。

Answer 6

调用以下函数，并将其传递给两个参数：minorLabel（jQuery（'＃email_field'），'email'）;

  function slightLabel(input, text) {
        jQuery(input).val(text);
        jQuery(input).data('defaultText', text);
        jQuery(input).focus(function(){
            if(!jQuery(this).data('touched'))
            {
                jQuery(this).data('touched', true);
                jQuery(input).val('');
            }
        });

        // the part to restore the original text in
        jQuery(input).blur(function(){
            if(jQuery(this).val() == '')
            {
                jQuery(this).val(jQuery(this).data('defaultText'));
            }
        });

    }

Answer 7

您可以使用jquery的水印插件之一来做到这一点。 我使用具有以下代码的水印插件

$.fn.watermark = function (c, t) {
var e = function (e) {
    var i = $(this);
    if (!i.val()) {
        var w = t || i.attr('title'), $c = $($("<div />").append(i.clone()).html().replace(/type=\"?password\"?/, 'type="text"')).val(w).addClass(c);
        i.replaceWith($c);
        $c.focus(function () {
            $c.replaceWith(i); setTimeout(function () { i.focus(); }, 1);
        })
            .change(function (e) {
                i.val($c.val()); $c.val(w); i.val() && $c.replaceWith(i);
            })
            .closest('form').submit(function () {
                $c.replaceWith(i);
            });
    }
};
return $(this).live('blur change', e).change();

};

通过将输入文本框的类设置为水印，可以在jquery中调用

<input type="text" id="keyword" name="keyword" class="watermark" style="width: 250px"
    title="Type keyword here" />

标题是将在水印中显示的内容。