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

时间:2010-06-06 13:26:35

标签: javascript html input default-value

我有一个输入文字:

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

我想设置一个默认值,例如“你的编程问题是什么?具体。”在StackOverFlow中,当用户点击它时,默认值为disapear。

13 个答案:

答案 0 :(得分:108)

为了将来参考,我 包含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 version)了解解决方案。使用它,您将非常现代且符合标准,同时还为大多数用户提供功能。

此外,提供的链接是经过充分测试和完善的解决方案,应该可以立即使用。

答案 1 :(得分:64)

编辑:虽然此解决方案有效,但我建议您尝试MvanGeest's solution below使用placeholder - 属性和不支持它的浏览器的javascript备用爱好。

如果您正在寻找与MvanGeest的回复中的JQuery后备相当的Mootools,here is one

-

您应该使用onfocusonblur个活动来支持通过表单制作标签的键盘用户。

以下是一个例子:

<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 = '';}" />

答案 2 :(得分:26)

我认为这有点清洁。请注意输入的“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>

答案 3 :(得分:7)

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

答案 4 :(得分:3)

输入以下内容 在标记内,只需添加onFocus =“value =''”,以便最终代码如下所示:

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

这使用了javascript onFocus()事件持有者。

答案 5 :(得分:2)

只需在输入中使用placeholder标记,而不是value

答案 6 :(得分:1)

我们可以在不使用js的情况下使用&#34;占位符&#34; html5的属性  (当用户开始输入时,默认文本消失,但不是仅仅点击)

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

请参阅:http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

答案 7 :(得分:1)

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

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

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

注意:占位符属性使用以下输入类型:text,search,url,tel,email和password。

我认为这会有所帮助。

答案 8 :(得分:0)

这是非常简单的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";
    }
}

答案 9 :(得分:0)

为什么要删除价值?它有用,但为什么不尝试CSS

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

价值对于检查&amp;验证你的PHP

答案 10 :(得分:0)

这是一个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>

答案 11 :(得分:0)

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

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";}; }

答案 12 :(得分:0)

这是一种简单的方法。

#animal-value表示来自DOM的任何按钮 $("#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 }); 是目标输入ID。

self.tableView.tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 0.0f, 0.001f)];
[self.tableView reloadData];