IE9 placeholder 不兼容的解决

坑爹的IE9-，真的是够够的了，不过公司不要求兼容这个玩意了，自己觉得兼容这个鬼还是挺有挑战性的，自己也碰到不少难题，一个个解决。

css:

.placeholderColor { color : #999; }

　

先判断浏览器类型（仅判断IE，如果需要请自行查找，线上很多）：

    function myBrowser(){
           var userAgent = navigator.userAgent;
           var isOpera = userAgent.indexOf("Opera") > -1;
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
        if (isIE) {
            var IE5 = IE55 = IE6 = IE7 = IE8 = IE9 = IE10 = IE11=false;
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            IE55 = fIEVersion == 5.5;
            IE6 = fIEVersion == 6.0;
            IE7 = fIEVersion == 7.0;
            IE8 = fIEVersion == 8.0;
            IE9 = fIEVersion == 9.0;
            IE10 = fIEVersion == 10.0;
            IE11 = fIEVersion == 11.0;

            if (IE55) {
                return "IE55";
            }
            if (IE6) {
                return "IE6";
            }
            if (IE7) {
                return "IE7";
            }
            if (IE8) {
                return "IE8";
            }
            if (IE9) {
                return "IE9";
            }
        }
    }

下面是placeholder的修复函数：

function fix_ie_placeholder(){
        $("[placeholder]").each(function(){
            var el = $(this);
            var placeholder = el.attr("placeholder");
            if(el.prop("type")=="password")
            {
                el.focus(function ()
                {
                    $(this).prop("type","password");
                    if($(this).val() == $(this).attr("placeholder"))
                    {
                        $(this).val('').removeClass("placeholderColor");
                    }
                }).blur(function ()
                {
                    if($(this).val()=='')
                    {
                        $(this).prop("type","text");
                        $(this).val($(this).attr("placeholder")).addClass("placeholderColor");
                    }
                }).blur();

                if(el.val()==''||el.val()==el.attr("placeholder"))
                {
                    el.rop("type","text");
                    el.val($(this).attr("placeholder")).addClass("placeholderColor");
                }
            }
            else
            {
                el.focus(function ()
                {
                    if($(this).val() == $(this).attr("placeholder"))
                    {
                        $(this).val('').removeClass("placeholderColor");
                    }
                }).blur(function ()
                {
                    if($(this).val()=='')
                    {
                        $(this).val($(this).attr("placeholder")).addClass("placeholderColor");
                    }
                });

                if(el.val()==''||el.val()==el.attr("placeholder"))
                {
                    el.val($(this).attr("placeholder")).addClass("placeholderColor");
                }
            }
        });
    };

如果为IE9，则执行placeholder修复函数：

if（myBrowser() == "IE9"）{
　　fix_ie_placeholder();
}

OK，试一下吧，应该好用，我自己测试IE9没问题。Happy New Year!