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

StackOverflow https://stackoverflow.com/questions/2260367

题

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

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

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

  • 查看表格 土豚. 。这正是我希望的输入表单。

  • 我们自己的 Stack Overflow - 当您尝试提出问题时，在任何输入表单内单击，它不会立即隐藏文本。您会看到光标和提示。但当你开始输入时，它会隐藏提示。（我更喜欢让它变成更浅的色调，而不是像上面的土豚例子一样隐藏在一起。）

我非常清楚地记得在互联网上的某个地方读过一个教程，其中包含这个确切的要求，但是该死的，我忘了给它添加书签。

有什么建议/链接吗？

[更新：我最近发现了一个 jQuery 插件 现场标签 这正是我想要的。还， 这是链接 改进同一插件。]

有帮助吗？

解决方案

您可能想从这里开始：

<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 还将光标位置设置为文本框的开头，而不是留在末尾。要使其跨浏览器工作可能有点棘手，但您可能需要检查以下文章中提出的解决方案： 乔什·斯托多拉:

其他提示

HTML5 有 placeholder 属性, ，它就是专为这项任务而设计的。

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

这是微不足道的 检查 placeholder JavaScript 支持.

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

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

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

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

为了实现焦点上的颜色变化和按键上的文本清晰，它将是：

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

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

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

我写 这个例子 由于没有更好的名字，我将其称为持久占位符。

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top