jQuery插件实现placeholder属性在IE9-下的使用以及在各大浏览器的显示效果一致

      这篇博文主要介绍了基于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", "");

                }

            });

        }