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!