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

Question

我有一个输入文本:

<input name="Email" type="text" id="Email" value="[e-mail]" />

我想在 Stack Overflow 中设置一个默认值，例如“你的编程问题是什么？请具体描述。”，当用户点击时，默认值会消失。

- Wassim AZIRAR

Answer 1

为了以后的参考，我必须包含 HTML5 的方法来完成这个。

<input name="Email" type="text" id="Email" value="[e-mail]" placeholder="What's your programming question ? be specific." />

如果你的网页采用HTML5 Doctype，并且使用支持HTML5的浏览器，这段代码就能够生效。但是，很多浏览器目前还不支持它，所以至少IE用户将无法看到占位符。然而，你可以查看JQuery HTML5 placeholder fix « Kamikazemusic.com来获得解决方案。使用这个方法，你既可以非常现代化和符合标准，同时也可以为大部分用户提供功能。

另外，提供的链接是一个经过充分测试和开发的解决方案，应该可以直接使用。

- MvanGeest

---

很好的答案，现在非常相关。作为<textarea placeholder="写点什么..."></textarea>也能很好地工作。 - Danny Beckett

value="" 似乎会覆盖占位符，当两者同时存在时无法正常工作。 - LTech

@Brian：链接对我有效，但我添加了一个链接到archive.org的页面版本，大约是在我写这个答案的时候。请记住，那是在2010年 - 现在所有现代浏览器都支持占位符属性，所以您不应该需要 - 也可能不应该使用 - 兼容性增强脚本。 - MvanGeest

Answer 2

尽管这个解决方案有效，我建议您尝试下面MvanGeest的解决方案，它使用placeholder属性和JavaScript回退，适用于不支持它的浏览器。

如果您正在寻找一个与MvanGeest回复中jQuery回退相当的Mootools替代方案，这里有一个。

--

为了支持通过表单进行Tab键操作的用户，您应该使用onfocus和onblur事件。

以下是一个示例：

<input type="text" value="[e-mail]" name="Email" id="Email"
 onblur="if (this.value == '') {this.value = '[e-mail]';}"
 onfocus="if (this.value == '[e-mail]') {this.value = '';}" />

- mqchen

---

赞成。不要污染DOM，有更语义化的解决方案（更干净、更简短等）。 - MvanGeest

我认为提问者只是想要一个简单的解决方案，所以我只是毫不犹豫地给了他最简单的解决方案。但是，我认为理想的解决方案（正如你所指出的）应该是使用placeholder属性，并为尚未支持它的浏览器提供JavaScript回退。 - mqchen

@roosteronacid - 你把“干净的源代码”和“干净的DOM”混淆了，它们是两个非常不同的概念。这是一种“连接处理程序”的替代方法，DOM将几乎看不出这种方法与一种非侵入式方法之间的区别。标记不是DOM，而是初始化DOM的结构。 - Nick Craver

依我看，使用HTML属性没有任何问题。最重要的是它不会“污染DOM”。这是设置事件侦听器的最佳和最可靠的方法，可以立即工作，无需等待DOM准备好或加载。唯一可以改进的是将内联代码提取到函数中。 - RoToRa

@sebastian_h 我建议你使用 placeholder 属性。它是为这些情况而设计的，而且有几个脚本可以为旧版浏览器添加兼容性。请查看 @MvanGeest 下面的答案。 - mqchen

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>

- Jani

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

- cllpse

---

这里有三个程序相关的评论：1）if (this.value == v) this.value = v; 应该改为 if (this.value === "") this.value = v;，2）即使是有效的非默认值，您也会在焦点清除该值，3）不要假设他们正在使用jQuery。 - Nick Craver

好的，我发现了错误并进行了更正。谢谢你，Nick :) - cllpse

您的解决方案仍会在我输入任何内容并重新聚焦元素时清除该元素，这不是期望的行为。 - Nick Craver

@NickCraver，在这种情况下我们真的需要使用===吗？我认为我们总是可以假设文本输入的值是一个字符串，除了""之外不会有其他评估结果。 - Brian Nickel

Answer 5

将以下内容输入标签内，只需添加onFocus="value=''"，这样您最终的代码就像这样：

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

这使用了javascript的onFocus()事件处理器。

- Myke

Answer 6

只需在输入框中使用 placeholder 标签，而不是 value。

- 072et

---

我不知道那个属性存在，它很好用，谢谢！ - jacktrader

Answer 7

我们可以使用HTML5的“placeholder”属性来实现不使用JavaScript的以下方式（当用户开始输入时，默认文本会消失，但仅在单击时不会消失）。

请看这个例子：http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder 代码如下： ``` ```

- c-h-a-r-a-n

Answer 8

<input name="Email" type="text" id="Email" placeholder="输入您的问题" />

placeholder 属性指定了输入框期望的值的短提示信息（例如示例值或预期格式的简短说明）。

在用户输入值之前，该简短提示将显示在输入框中。

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

我认为这会有所帮助。

- kkk

---

你正在展示占位符的使用，但对该主题进行简要描述将真正帮助其他人。 - Anthony

我已经编辑了我的答案，希望这个关于占位符的描述能够帮助大家。 - kkk

Answer 9

为什么要删除数值？它很有用，但为什么不尝试使用CSS呢？

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

验证和检查值对于 PHP 编程至关重要

- KingRider

Answer 10

这里是非常简单的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>

- ELO

---

你应该展示如何连接它。这些函数本身什么也不做。 - Brian Nickel

<form role="search" method="get" id="searchform" action=""> <div><label class="screen-reader-text" for="s">搜索</label> <input type="text" class="lightinput" onfocus="sFocus(this)" onblur="sBlur(this)" value="输入搜索内容" name="s" id="s" /> <input type="submit" id="searchsubmit" value="" /> </div> </form> - ELO