HTML5实践-实现跨浏览器HTML5文字占位符-placeholder的具体介绍-木庄网络博客

本文摘自PHP中文网，作者黄舟，侵删。

html5为web的form表单增强了一个功能，他就是input的占位符--placeholder。占位符的作用是，当input内容为空或者没有被聚焦的时候，input显示占位符的内容。这是个很棒的功能，但不是所有的浏览器都支持。本教程将向你介绍，如何使用 Modernizr 类库去判断浏览器是否支持该属性，然后使用jquery动态显示占位符。

　　以前使用JavaScript实现的方式

　　在没有placeholder属性的日子里，我们使用javascript去模拟他的实现。在下面的例子里，我们向input添加了一个value属性。input聚焦的时候，我们判断value的值是否是‘search’，是的话就清空内容。当input失去焦点的时候，我们判断内容是否为空，为空就将value设置为‘search’。

<span style="color: #0000ff;"><<span style="color: #800000;">input <span style="color: #ff0000;">type<span style="color: #0000ff;">="text"<span style="color: #ff0000;"> value<span style="color: #0000ff;">="Search"<span style="color: #ff0000;"> <a href="http://www.php.cn/wiki/1465.html" target="_blank">onfocus</a><span style="color: #0000ff;">="<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a> (this.value == 'Search') {this.value = '';}"<span style="color: #ff0000;"> 　　<a href="http://www.php.cn/wiki/1463.html" target="_blank">onblur</a><span style="color: #0000ff;">="if (this.value == '') {this.value = 'Search';}" /<span style="color: #0000ff;">>