Javascript 如何灰显文本框的默认文本？

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

但是，我想对默认文本应用一些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>

你需要帮助的问题或主题（一句话）。。。

---

谢谢

> P>你应该考虑使用HTML5<代码>占位符< /Cord>属性。

---

这会将文本变为浅灰色，并在焦点处删除。

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

<>如果您的帮助文本比简单的“输入名称”或任何内容更重要，请考虑在相邻元素中提供屏幕提示。这样，即使用户在文本区域中输入了一些内容，也可以看到帮助，并可以检查他们输入的内容是否与提示兼容

e、 g.如果您想要特定的日期格式，在用户在字段中输入内容后，仍然可以显示所需的日期格式是很方便的，否则用户验证其输入的唯一方法是删除条目并模糊元素，这不仅比需要的工作量大，而且不是很明显

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

您为用户提供的服务越简单，他们就越有可能遵守您的要求，而不会抱怨使用您的网站的困难

e、 g

textarea.问题{
宽度：50em；
高度：3em；
边框：1px纯蓝色；
}
.屏幕帮助{
字体系列：日内瓦，arial，无衬线；
字号：80%；
颜色：#bbbbbb；
背景色：#ffffff；
}
.输入{
字体系列：日内瓦，arial，无衬线；
字体大小：90%；
}
您需要帮助的问题或主题
（请用一句话）

两个词：

占位符

属性。最好像占位符一样-不要在MouseOver上使用

。但是，您应该只使用
占位符
和一个用于旧浏览器的插件。HTML5占位符就是为这个而设计的！不要使用占位符（本机、脚本等），它们会让用户感到痛苦。请提供屏幕上的帮助。@Donny图像链接不起作用。上面的链接无法转到其预期的目标页面
  <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>