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

Question

我有一个输入文本：

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

我想设置一个默认值，例如“您的编程问题是什么？具体一点。”在 StackOverFlow 中，当用户点击它时，默认值消失。

Answer 1

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

// 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";
    }
}
// HTML
<form>
  <label class="screen-reader-text" for="s">Search for</label>
  <input
    type="text"
    class="lightinput"
    onfocus="sFocus(this)" 
    onblur="sBlur(this)"
    value="Enter your search" name="s" id="s"
  />
</form>

Answer 2

这是一个简单的方法。

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

Answer 3

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

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

Answer 4

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

此外，所提供的链接是一个经过充分测试和完善的解决方案，应该可以开箱即用。

Answer 5

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

Answer 6

只需在您的输入中使用placeholder 标签而不是value

Answer 7

为什么要删除价值？它很有用，但为什么不试试 CSS

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

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

Answer 8

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

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

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

注意：占位符属性适用于以下输入类型：文本、搜索、url、电话、电子邮件和密码。

我认为这会有所帮助。

Answer 9

我们可以不使用js，使用html5的“placeholder”属性通过以下方式做到这一点 （当用户开始输入时，默认文本会消失，但不是在单击时）

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

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

Answer 10

输入以下内容 在 标记内，只需添加 onFocus="value=''" 以便您的最终代码如下所示：

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

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

Answer 11

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

编辑：尽管此解决方案有效，但我建议您尝试MvanGeest's solution below，它使用placeholder-attribute 和一个javascript 后备，用于尚不支持它的浏览器。

如果您正在寻找与 MvanGeest 回复中的 JQuery 回退等效的 Mootools，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 = '';}" />

Answer 13

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