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

供以后参考,我 有 包括HTML5方法。

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

如果您有HTML5 doctype和符合HTML5的浏览器,这将有效。然而, 许多浏览器当前不支持此功能 ,因此至少Internet Explorer用户将无法看到您的占位符。然而,见 http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ ( archive.org version )一个解决方案。使用它,您将非常现代并且符合标准,同时也为大多数用户提供了功能。

此外,所提供的链接是一个经过良好测试和开发的解决方案,应该是现成的。

编辑 :尽管这个解决方案有效,但我建议您尝试一下。 MvanGeest's solution below placeholder -属性和一个Javascript回退给还不支持它的浏览器。

如果您在mvangeest的回复中寻找相当于jquery回退的moootools, here is one .

——

你应该使用 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 = '';}" />

我想这有点干净。注意输入的“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>

使用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;
    };
}

输入以下内容 在 标记内,只需添加onfocus=“value=''”,这样您的最终代码就可以如下所示:

<input type=“email”id=“email”onfocus=“value=''”>
< /代码> 

这将使用javascript onfocus()事件保持器。

他跟随
里面标记,只需添加onfocus=“value=''”,使最终代码如下所示:


<input type="email" id="Email" onFocus="value=''"> 


这将使用javascript onfocus()事件保持器。

只使用一个 placeholder 在输入中标记而不是 value

我们可以使用html5的“placeholder”属性在不使用JS的情况下完成此操作 (当用户开始键入时,默认文本将消失,但不只是单击)

<input type="email" id="email" placeholder="xyz@abc.com">

看到这个: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

<input name="Email" type="text" id="Email" placeholder="enter your question" />

placeholder属性指定一个简短提示,用于描述输入字段的预期值(例如示例值或预期格式的简短描述)。

短提示在用户输入值之前显示在输入字段中。

注意:placeholder属性可用于以下输入类型:文本、搜索、URL、电话、电子邮件和密码。

我想这会有帮助的。

这里是非常简单的javascript。它对我来说很好:

function sFocus (field) {
    if(field.value == 'Enter your search') {
        field.value = '';
    }
    field.className = "darkinput";
}

function sBlur (field) {
    if (field.value == '') {
        field.value = 'Enter your search';
        field.className = "lightinput";
    }
    else {
        field.className = "darkinput";
    }
}

为什么要移除价值?它很有用,但是为什么不试试CSS呢?

input[submit] {
   font-size: 0 !important;
}

值对于检查和验证UR PHP很重要

这里是一个jquery解决方案。当用户清除输入字段时,我总是让默认值重新出现。

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

<script>
$("#Email").blur(
    function (){
        if ($(this).val() == "")
            $(this).val($(this).prop("defaultValue"));
        }
).focus(
    function (){
        if ($(this).val() == $(this).prop("defaultValue"))
            $(this).val("");
    }
);
</script>

我没有看到像这样简单的答案,所以也许它能帮助别人。

var inputText = document.getElementById("inputText");
inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; }
inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; }

这是一个简单的方法。

#animal 表示来自DOM的任何按钮。
#animal-value 是要作为目标的输入ID。

$("#animal").on('click', function(){
    var userVal = $("#animal-value").val(); // storing that value
    console.log(userVal); // logging the stored value to the console
    $("#animal-value").val('') // reseting it to empty
});