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

How do I grey out the default text of a text box?

本文关键字：文本 默认 何使      更新时间：2023-09-26

我有一个文本框，显示一些默认文本。当鼠标移到上面时，文本就会消失，用户就可以在那里定期输入:

http://snpr.cm/bnGelO.jpg

但是，我想对默认文本应用一些CSS样式，使其看起来像说明文本而不是其他文本。你对如何做到这一点有什么想法吗?

  1. 默认文本为灰色

  2. 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>

谢谢!

你应该考虑使用HTML5的placeholder属性。

文本颜色为浅灰色，并在焦点处移除。

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

如果你的帮助文本比简单的"输入名称…"或其他内容更重要，可以考虑在相邻元素中提供屏幕提示。这样，即使用户已经在文本区输入了一些内容，也可以看到帮助，并且可以检查他们输入的内容是否与提示兼容。

。如果需要特定格式的日期，在用户向字段中输入内容后仍然显示所需的日期格式是很方便的，否则，用户验证其输入的唯一方法是删除条目并模糊元素—这不仅比需要做的更多，而且不会立即明显。

在这种情况下，您提供了一些非常具体的建议(必须在一个句子中)和其他信息——当用户开始输入文本时，他们是否会记住这些信息?等他们检查填写是否正确的时候呢?

你为用户做的越简单，他们就越有可能遵守你的要求，而不是抱怨使用你的网站的困难。

。

  <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>
相关文章：