javascript - 显示默认文本的评论框文本区域在用户聚焦时消失

Question

大家好，我正在创建一个评论框，我想对评论框做两件事，我认为这需要 javascript，但我还不是真正的 javascript 专家。我希望评论框在其中显示一些文字(输入您的评论)，当用户单击它时，文字消失。而且，我只想在用户点击评论框时显示一个提交按钮，你知道我有什么办法可以做到这一点吗？

Answer 1

我已经提出a page showing how to do this使用纯 JavaScript。我已经抽象出让文本输入/区域显示说明性文本直到聚焦的代码。

一般来说:

• 观察输入上的 focus 和 blur 事件，并根据现有值/“有用”值更改值(以及可选的类)。
• 观察评论框的focus和blur，并更改另一个元素的CSS类来显示和隐藏它。

如果你使用像 jQuery 这样的东西，这一切都会容易一些，因为它已经包含跨浏览器代码甚至插件来处理自描述部分。如果您愿意使用 jQuery，请告诉我，我会使用它为您提供更新的答案。

编辑:好的，我添加了一个jQuery version of the example .我决定不使用插件进行 self 描述，因为它只有 8 行。我还更改了该特定示例，以使用 title 属性来保存要显示的默认文本。

编辑#2:基于@Meke 指出的问题，我对脚本进行了小幅更新以处理 FireFox 重新加载页面并保留默认文本的情况，然后(以前)没有正确添加类来指示这是默认文本。

我还应该注意，我的两个示例都不包含表单的 submit 事件处理程序，以删除碰巧仍显示默认值的输入的值。这个(相当简单的代码)是您想要添加的内容。

另请注意，像这样实际更改输入/文本区域代码的 value 可能会破坏不准备理解它的表单验证。