这篇博文主要介绍了基于jQuery解决placeholder的兼容性问题和显示效果表现不一致的问题，需要的friends可以借鉴一下。若博文中出现一些错误或不恰当的地方也欢迎大家指出。
我们都知道placeholder属性是用来描述输入域所期待的值，是一种提示（hint），在做登录注册页面以及搜索框时给予提示对用户体验非常不错。然而它也是HTML5中<input>新增的属性之一。在不支持HTML5的非现代浏览器（如IE6~IE9）是不支持placeholder属性的，这就是我们要解决的问题之一，使用jQuery插件实现非现代浏览器对placeholder的使用。
首先，下载jQuery插件：jquery.placeholder.js。
其次，在需要使用placeholder属性的页面，引入jq（jQuery的版本选择会在下一个问题进行讲解）和jquery.placeholder.js。注意引入时， 先引入jq，再引入该插件。
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
最后，在该页面或者js文件中写入如下脚本：
$(function() {
$(".sform input").placeholder();
})；
如果要对placeholder属性里的值进行样式的设置，在该页面<style></style>或者css文件中使用以下方式进行设置：
/*修改提示文字的字体大小颜色*/
/*Webkit browsers*/
.sform input::-webkit-input-placeholder {
color: #999999;
font-family: "Microsoft Yahei";
font-size: 16px;
/*text-indent: 2em;*/
}
/* Mozilla Firefox 4 to 18 */
.sform input:-moz-placeholder {
color: #999999;
font-family: "Microsoft Yahei";
font-size: 16px;
/*text-indent: 2em;*/
}
/*Mozilla Firefox 19+*/
.sform input::-moz-placeholder {
color: #999999;
font-family: "Microsoft Yahei";
font-size: 16px;
/*无效果*/
/*text-indent: 2em;*/
}
/*Internet Explorer 10+*/
.sform input:-ms-input-placeholder {
color: #999999;
font-family: "Microsoft Yahei";
font-size: 16px;
/*text-indent: 2em;*/
}
/*Internet Explorer 7 to 9*/
.placeholder {
color: #999999;
font-family: "Microsoft Yahei";
font-size: 16px;
/*text-indent: 2em;*/
}
PS：在IE8-下输入框的光标不会垂直居中，需要通过设置line-height样式来实现
解决完第一个问题，我们来看第二个问题。
placeholder支持HTML5的现代浏览器（IE10+、Chrome、FireFox、Opera、Safari）的显示效果是不一致的：在
IE10+/Safari 5.1.7里输入框获取焦点时提示文字消失，而在Firefox/Chrome/Safari下输入框获取焦点时提示文字不消失，
当键盘输入时提示文字才消失。
第一步，我们要先判断浏览器的内核标识，可以使用jQuery里的方法$.browser来判断。而$.browser这个属性在jQuery 1.9已经被删除，所以引入jq时，要使用jQuery 1.9以下，jQuery 1.4以上的版本。
例：如果当前使用的浏览器是 Microsoft 的 Internet Explorer，那么下面的语句会返回 true。
$.browser.msie;
第二步，.focus()事件和.blur()事件来解决在Firefox/Chrome/Safari下输入框获取焦点时提示文字不消失，当键盘输入时提示文字才消失的效果。
//$.browser用来获取浏览器内核标识
if ($.browser.webkit || $.browser.mozilla) {
$(".sform input").focus(function(event) {
$(this).attr("placeholder", "");
});
$(".sform input").blur(function(event) {
if ($(this).val() == "") {
$(this).attr("placeholder", "五一特惠 免费安装");
} else {
$(this).attr("placeholder", "");
}
});
}
