Javascript JQuery空文本框上的默认文本

我有一个电子邮件表单文本框，虽然它是空的，但我希望它的值为“E-Mail”，当你点击它时，文本就会消失。如果有人点击它，但没有输入文本。关于模糊，我希望它返回到默认文本

---

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

只需擦除值

onfocus

，然后（如果值仍然为空）重新填充

onblur
调用下面的函数并传递两个参数：slinglabel（jQuery（“#email_字段”），“email”）

您可以使用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();

$.fn.watermark=函数（c，t）{
var e=函数（e）{
var i=$（本）；
如果（！i.val（））{
var w=t | | i.attr（'title'），$c=$（$（“”）。append（i.clone（））.html（）。replace（/type=\“？password\”？/，'type=“text”））。val（w）。addClass（c）；
i、 替换为（c美元）；
$c.focus（函数（）{
$c.replaceWith（i）；setTimeout（函数（）{i.focus（）；}，1）；
})
.更改（功能（e）{
i、 val（$c.val（））；$c.val（w）；i.val（）&&$c.replacetwith（i）；
})
.closest（'form'）.submit（函数（）{
$c.替换为（i）；
});
}
};
返回$（this.live（'blur change'，e）.change（）；

})

可以在jquery中通过如下方式将输入文本框的类设置为水印来调用

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

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



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

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

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

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

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

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


$（文档）.ready（函数（）{
$（'.watermark'）.focus（函数（）{
if（$（this.val（）==$（this.attr（'placeholder'））{
$（this.val（“”）；
}
}).blur（函数（）{
if（$（this.val（）=''）{
$（this.val（$（this.attr（'placeholder'））；
}
});
});
使用此插件

使用此插件还可以在不支持HTML5的浏览器中使用占位符属性。
不知道占位符属性。很好的补充！：）这是一个耻辱，即目前不支持它（9）。人们仍然认为IE是一个Web浏览器吗？这个例子也删除了输入字段中新输入的文本，这不是你想要的。