12

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

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

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

  • 查看Aardvark上的表格。这正是我希望输入表单的方式。

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

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

有什么建议/链接吗？

[更新：我最近发现了一个 jQuery 插件In-Field Labels，它完全符合我的要求。此外，这里是同一插件改进的链接。]

4

5 回答 5

15

HTML5 具有placeholder属性，它就是为这个任务而设计的。

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

检查placeholderJavaScript 中的支持很简单。

于 2010-02-14T09:18:56.767 回答
14

您可能想从这里开始：

<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在以下文章中提出的解决方案：

于 2010-02-14T06:55:47.723 回答
1

输入字段不能同时包含默认文本和用户输入的文本。实现您所要求的唯一可能的方法是在输入字段上使用包含您要显示的默认文本的图像的背景图像，但我强烈建议您不要这样做，因为两层文本对于用户。实现这一点的最常见方法（以及在您的示例站点 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');
  }
});
于 2010-02-14T07:46:14.830 回答
1

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

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});
于 2010-07-17T21:02:56.910 回答
0

我写了这个例子——因为没有更好的名字——我称之为持久占位符。

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

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

在包含 CSS 和 JS 之后，它就可以工作了。

于 2011-11-14T21:08:35.143 回答