评论框textarea显示当用户关注它时消失的默认文本

Sam*_*iel 1 javascript css comments

嘿伙计们,我正在创建一个评论框,我想在评论框中做两件事,我认为需要javascript,但我还不是真正使用javascript的专家.我希望评论框中显示一些文字(在评论中输入),当用户点击它时,文字就会消失.而且,我只想在用户点击评论框时显示提交按钮,你知道我能做到的任何方式吗?

Phr*_*ogz 7

我已经建立了一个页面,展示了如何使用纯JavaScript 进行此操作.我已经抽象了代码,让文本输入/区域显示教学文本,直到专注.

一般来说:

  • 观察输入上的事件focusblur事件,并根据现有值/"有用"值更改值(以及可选的类).
  • 观察focusblur评论框并更改另一个元素的CSS类以显示和隐藏它.

如果您使用类似jQuery的东西,这一切都会变得更容易,因为它已经包含跨浏览器代码甚至插件来处理自描述部分.如果你愿意使用jQuery,请告诉我,我会用这个给你一个更新的答案.

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

编辑#2:根据@Meke指出的问题,我对脚本进行了一些小的更新,以处理FireFox重新加载页面并保留默认文本的情况,然后(之前)没有正确添加表示这是默认文本的类.

我还应该注意,我的示例都没有包含submit表单的事件处理程序来删除仍然显示默认值的输入值.这个(相当简单的代码)是你想要添加的东西.

另请注意,通过实际更改value输入/ textarea代码,可能会破坏表单验证而不准备理解它.