很多网站在填写表单的时候,都可以看到这样一种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的时候要考虑到兼容方案。