很多网站在填写表单的时候，都可以看到这样一种UI，input[type=text]里面有提示的文字，当鼠标点进去之后提示文字就消失了。关于这种UI，之前有写过文章介绍过http://www.zhoumingzhi.com/?p=182。在本文中主要是介绍以HTML 5的实现方式以及兼容方案。
一，HTML 5的实现方式
HTML 5的input元素引入了placeholder的属性，就是为了实现本文开头所说的效果，代码也很简单。
|
以下是代码片段： <input type="text" placeholder="请输入一些文字" /> |
二，对不支持HTML 5浏览器的兼容方案
对于不支持HTML 5的浏览器，上面的方法就不可行了。但是placeholder这个属性可以利用起来，结合JS实现想达到的效果。下面结合代码说明实现方法：
首先要用JS检测一下浏览器支不支持placeholder这个属性。
如果支持的话就什么也不做，浏览器会帮你实现这个效果。
如果不支持则要写段JS。为了方便说明用到了jQuery，代码如下：
上述代码中有个叫placeholder的CSS类，这个主要是让占位符的字体颜色变灰。CSS如下：
实现上面的函数之后，就可以在页面初始化的时候调用了。
三，结论
HTML 5中有很多很方便的特性，但是目前不是所有浏览器都支持，所以在用HTML 5的时候要考虑到兼容方案。