单击时删除输入文本的默认值

Question

我有一个输入文字:

<input name="Email" type="text" id="Email" value="email@abc.com" />

我想提出一个默认值,比如"你的编程问题是什么？具体." 在StackOverFlow中,当用户点击它时,默认值为disapear.

Answer 1

为了将来参考,我必须包含HTML5方法来执行此操作.

<input name="Email" type="text" id="Email" value="email@abc.com" placeholder="What's your programming question ? be specific." />

如果您有HTML5文档类型和HTML5兼容的浏览器,这将有效.但是,许多浏览器目前不支持此功能,因此至少Internet Explorer用户将无法看到您的占位符.然而,看到http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ (archive.org版)的解决方案.使用它,您将非常现代且符合标准,同时还为大多数用户提供功能.

此外,提供的链接是经过充分测试和完善的解决方案,应该开箱即用.

Answer 2

编辑:尽管,这个解决方案的工作,我会建议您尝试MvanGeest的解决方案如下它使用placeholder-attribute和不支持它的浏览器还没有一个javascript回退.

如果您正在寻找与MvanGeest的回复中的JQuery后备相当的Mootools,这里有一个.

-

您应该使用onfocus和onblur事件来支持通过表单切换的键盘用户.

这是一个例子:

<input type="text" value="email@abc.com" name="Email" id="Email"
 onblur="if (this.value == '') {this.value = 'email@abc.com';}"
 onfocus="if (this.value == 'email@abc.com') {this.value = '';}" />

Answer 3

我认为这有点清洁.请注意输入的"defaultValue"属性的用法:

<script>
function onBlur(el) {
    if (el.value == '') {
        el.value = el.defaultValue;
    }
}
function onFocus(el) {
    if (el.value == el.defaultValue) {
        el.value = '';
    }
}
</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>

Answer 4

使用jQuery,您可以:

$("input:text").each(function ()
{
    // store default value
    var v = this.value;

    $(this).blur(function ()
    {
        // if input is empty, reset value to default 
        if (this.value.length == 0) this.value = v;
    }).focus(function ()
    {
        // when input is focused, clear its contents
        this.value = "";
    }); 
});

你可以将所有这些都填充到一个自定义插件中,如下所示:

jQuery.fn.hideObtrusiveText = function ()
{
    return this.each(function ()
    {
        var v = this.value;

        $(this).blur(function ()
        {
            if (this.value.length == 0) this.value = v;
        }).focus(function ()
        {
            this.value = "";
        }); 
    });
};

以下是使用插件的方法:

$("input:text").hideObtrusiveText();

使用此代码的优点是:

• 它不引人注目,不会污染DOM
• 代码重用:它适用于多个字段
• 它自己计算出输入的默认值

非jQuery方法:

function hideObtrusiveText(id)
{
    var e = document.getElementById(id);

    var v = e.value;

    e.onfocus = function ()
    {
        e.value = "";
    };

    e.onblur = function ()
    {
        if (e.value.length == 0) e.value = v;
    };
}