Question

我记得在某处找到了一个教程，讲述了如何以更“可用”的方式设置输入表单的样式。

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

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

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

我记得非常清楚地在interwebz上的某个地方阅读了这个具有这个确切要求的教程，但是，我忘了给它添加书签。

有任何建议/链接吗？

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

Answer 1

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

到目前为止，只有WebKit（Safari和谷歌浏览器中使用的渲染引擎）支持它。当不支持占位符时，你会想要像Daniel那样的JavaScript后备。

对check for placeholder support in JavaScript来说是微不足道的。

Answer 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

Answer 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');
  }
});

Answer 4

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

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

Answer 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之后，它就可以了。

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

5 个答案: