Question

我有一个显示默认文字的文本框。在鼠标悬停时，文本将消失，用户可以定期输入文本：

但是，我想将一些CSS样式应用于默认文本，使其看起来像教学文本而不是其他内容。你对如何做到这一点有任何想法吗？

默认文字为灰色
Onmouseover文本将消失，当用户开始输入时，它将只是普通的黑色。

以下是目前的代码：

<textarea
    class="textarea" 
    onblur="if(this.value=='') this.value='Question or topic you need help with (in one sentence)...';" 
    onfocus="if(this.value=='Question or topic you need help with (in one sentence)...') this.value='';" 
    id="question"
    name="question"
>
    Question or topic you need help with (in one sentence)...
</textarea>

谢谢！

Answer 1

您应该考虑使用HTML5 placeholder属性。

http://diveintohtml5.ep.io/forms.html#placeholder

这会将文本颜色设置为浅灰色，并在焦点上删除。

Answer 2

在焦点消失的帮助文本（包括占位符属性）中存在一个重要的可用性问题，因为用户只能在元素中没有内容时才能看到文本没有焦点。

如果您的帮助文本比简单的“输入名称...”或其他更重要，请考虑在相邻元素中提供屏幕提示。这样，即使用户在textarea中输入内容后也能看到帮助，并且可以检查他们输入的内容是否与提示兼容。

e.g。如果你想要一个特定的日期格式，在用户输入字段之后仍然可以显示所需的日期格式，否则用户可以验证其输入的唯一方法是删除条目并模糊元素 - 这是不仅需要更多的工作，而且还不是很明显。

在这种情况下，您提供一些非常具体的建议（必须在一个句子中）和其他信息 - 用户是否会记住他们何时开始输入文本？以后当他们检查他们是否正确填写表格时怎么样？

您越容易为用户制作，他们就越有可能遵守您的要求，而不是抱怨您使用网站的难度。

e.g。

  <style type="text/css">
  textarea.question {
    width: 50em;
    height: 3em;
    border: 1px solid blue;
  }
  .screenHelp {
    font-family: geneva, arial, sans-serif;
    font-size: 80%;
    color: #bbbbbb;
    background-color: #ffffff;
  }
  .inputTitle {
    font-family: geneva, arial, sans-serif;
    font-size: 90%;
  }
  </style>

<form action="">
  <div>
    <span class="inputTitle">Question or topic you need help with</span>
    <span class="screenHelp"> (in one sentence please)</span><br>
    <textarea name="question" class="question"></textarea>
    <br>
    <input type="reset"><input type="submit">
  </div>
</form>

如何使文本框的默认文本变灰？

2 个答案: