如何在表单中实现类似 Stack Overflow 的水印？答案

【问题标题】：How can I implement Stack Overflow-like watermarks in forms?如何在表单中实现类似 Stack Overflow 的水印？
【发布时间】：2011-01-16 15:38:00
【问题描述】：

我记得在某处看到过一个教程，其中讨论了如何以更“可用”的方式设置输入表单的样式。

本质上，您有一个占位符值，当您输入输入时，它会隐藏提示。

现在，要明确一点：我不希望提示（占位符值文本）在焦点上消失，而是在我第一次开始输入内容时变得更轻。很好的例子：

查看Aardvark 上的表格。这正是我希望输入表单的方式。
我们自己的 Stack Overflow — 当您尝试提问时，在任何输入表单内单击时，它不会立即隐藏文本。您会看到光标和提示。但是当您开始键入时，它会隐藏提示。（我宁愿让它变得更浅，而不是像上面的 Aardvark 示例一样隐藏在一起。）

我记得很清楚地在 interwebz 的某个地方读过一个关于这个确切要求的教程，但是该死，我忘了给它添加书签。

有什么建议/链接吗？

[更新：我最近发现了一个 jQuery 插件In-Field Labels，它完全符合我的要求。此外，here's the link 对同一插件的改进。 ]

【问题讨论】：

标签： jquery html css forms placeholder

【解决方案1】：

HTML5 有 placeholder attribute，专为这项任务而设计。

目前只有 WebKit（Safari 和 Google Chrome 中使用的渲染引擎）支持它。当不支持占位符时，您需要像 Daniel 那样的 JavaScript 后备。

check for placeholder support in JavaScript 微不足道。

【讨论】：

顺便说一句，应该有一个徽章，一有机会就提到 HTML5。
... 对于 jQuery :) ... +1：我不知道这一点。
非常好的建议。 HTML5 中的占位符可以直接在标签中输入：<input type="text" placeholder="Please enter username">... 但是在这个问题的上下文中，OP 引用了vark.com 的“立即加入”表单，其效果略有不同。 . 尽管如此，虽然vark.com 的效果相当不错，但我可能会满足于HTML5 占位符。
啊，是的，我明白了——文本在焦点上逐渐消失，并在用户实际输入内容时消失。那很好。（当然，Firefox 等人最终可能会实现这样的占位符文本。）
这绝对是要走的路。使用带有 javascript 后备的未来证明 placeholder。

【解决方案2】：

你可能想从这里开始：

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }">

您可能应该调整以上内容以使用 JavaScript 函数，以免重复提示字符串三次，但我希望这可以让您朝着正确的方向前进。

我还注意到vark.com 处的“立即加入”表单还将光标位置设置为文本框的开头，而不是将其留在末尾。让它跨浏览器工作可能有点棘手，但您可能需要查看Josh Stodola 的以下文章中提出的解决方案：

Setting Cursor Position in a Textbox or TextArea with Javascript

【讨论】：

还有一个名为 Clearfield 的 jQuery 插件，它可以为您完成所有工作，并让您将 js 留在 HTML 之外。
谢谢丹尼尔，这绝对是正确的方法。我还是有点懒自己编写代码，所以将其标记为答案。如果我完全编码，我会在这里发布。

【解决方案3】：

输入字段不能同时包含默认文本和用户输入的文本。实现您所要求的唯一可能的方法是在输入字段上使用包含您要显示的默认文本的图像的背景图像，但我强烈建议不要这样做，因为它有两层文本会让用户感到非常困惑。实现这一点的最常见方法（以及在您的示例网站 vark.com 上所做的）是使用 focus 方法清除文本：

$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

要以 StackOverflow（和 Vark.com 的注册表单）的方式实现它，您可以对 keydown 事件使用相同的方法：

$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

要实现焦点上的颜色变化和 keydown 上的文本清晰，它将是：

// set text to grey on focus
$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).css('color', '#999999');
  }
});

// set text to black and clear default value on key press
$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
    $(this).css('color', '#000000');
  }
});

【讨论】：

@Cryo：我认为 OP 的意图与“立即加入！”中的形式相同。在vark.com。我不认为我们的意图是叠加文字。

【解决方案4】：

在回复@Paul 的帖子时，我注意到 HTML5 占位符的行为在我的 Android 模拟器上表现得很奇怪。占位符看起来很棒，直到您单击它并且光标在单词右侧时它变成黑色。当然，如果您键入它会消失，但它并不直观。所以我写了一些 jQuery 来修复它（我的 HTML5/jQuery 徽章在哪里？）

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});

【讨论】：

【解决方案5】：

我写了this example，由于没有更好的名字，我将其称为持久占位符。

它需要更多标记，div 包装 label 和 input，但这解决了许多其他问题（例如占位符进入表单数据或密码字段不起作用）和实际标记读起来很干净。你最终会得到这样的结果：

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" type="text" name="username">
</div>

在加入 CSS 和 JS 之后，它就可以工作了。

【讨论】：