HTML5 带来了一些新的属性，其中有一个很好的增强是为文本输入框提供了文本占位符（placeholder）。当输入框为空时且没有聚焦时（聚焦时清空文字），Placeholder 属性可显示提示文字。这是一个很好的特性，但目前并没有被所有浏览器支持。本教程将介绍如何使用 Modernizr 检测浏览器是否支持 placeholder 属性，否则使用 jQuery 动态显示占位符文本。
传统的 Javascript 方式
没有 placeholder 属性以前，我们依赖如下的 Javascript 代码来伪造 placeholder. 我们将文本插入到 value 属性。聚集焦点时，如果value的值为 “search” 清除内容并返回空值。若 value 的值为空，则显示 “search”。正如你所看到的，这并不是一种高效的方式，因为需要检查每一个字段。
<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">jQuery Placeholder 文本
现在我们可以使用更加语义化的 HTML5 placeholder 属性来替代 value 属性。然而，palceholder 文本并没被所有浏览器支持。Modernizr 脚本和 jquery 提供了一种便捷的方式来实现跨浏览器兼容。
Modernizr 用来检查浏览器是否支持 placeholder 。如果不支持 placeholder 属性，则运行 jQuery 代码。它在所有元素中查找 palceholder ，并贮存在一个变量中。然后比较占位符属性与 input 的值。如果值为空，它将显示 placeholder 文本并在输入字段增加一个 “palceholder”类。查看 Demo。
要在站点中使用的话，只需下载 Modernizr 和 jQuery 并粘贴下面的代码到你的 Html 代码的任何部位（确保 jQuery.js 和 modernizr.js 的路径正确）。
<script src="jquery.js"><!--mce:0--></script> <script src="modernizr.js"><!--mce:1--></script> $(document).ready(function(){ if(!Modernizr.input.placeholder){ $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur(); $('[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) }); }
移除 Webkit 内核浏览器的搜索输入方式
Webkit 浏览器为搜索字段增加了额外的样式。可以增加如下代码删除它们：
input[type=search] { -webkit-appearance: none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { display: none; }
鸣谢
jQuery 代码来自： Nico Hagenburger
英文原文来自：Web Designer Wall