input placeholder兼容ie10以下

代码如下:

 if( /msie/.test(navigator.userAgent.toLowerCase()) && $.browser.version.slice(0,3) < 10) {
        $('input[placeholder]').each(function(){ 
       
        var input = $(this);       
       
        $(input).val(input.attr('placeholder'));
               
        $(input).focus(function(){
             if (input.val() == input.attr('placeholder')) {
                 input.val('');
             }
        });
       
        $(input).blur(function(){
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.val(input.attr('placeholder'));
            }
            });
        });    
      }    

其中

$.brower.msie =  /msie/.test(navigator.userAgent.toLowerCase())  //$.brower jquery1.90以上被去除

Jquery 1.9.0 以上版本 扩展使用 $.browser 方法


由于jQuery 1.9.0 以上版本 jquery去掉了对 $.browser 的支持,采用$.support 来判断浏览器类型。导致之前的很多插件报错

"Uncaught TypeError: Cannot read property 'msie' of undefined".

 

网上有很多解决办法如:

判断浏览器类型:

 

[html] view plain copy
 
  1. <span style="white-space:pre">    </span>$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());  
  2.     $.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());  
  3.     $.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());  
  4.     $.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());  


号后面的表达式返回的就是 true/false, 可以直接用来替换原来的 $.browser.msie 等。


检查是否为 IE6:
// Old
[html] view plain copy
 
  1. <span style="white-space:pre">    </span>if ($.browser.msie && 7 > $.browser.version) {}  
 // New
[html] view plain copy
 
  1. <span style="white-space:pre">    </span>if ('undefined' == typeof(document.body.style.maxHeight)) {}  
 检查是否为 IE 6-8:
[html] view plain copy
 
  1. <span style="white-space:pre">    </span>if (!$.support.leadingWhitespace) {}  

 

 

**************************************************************************

下面  我们采取的思路是 使用jquery的继承机制 对jquery 1.11.1版本 进行扩展 使其支持 $.browser 方法,已达到兼容之前组件的目的.

 

[html] view plain copy
 
  1. jQuery.extend({  
  2.     browser: function()   
  3.     {  
  4.         var  
  5.         rwebkit = /(webkit)\/([\w.]+)/,  
  6.         ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,  
  7.         rmsie = /(msie) ([\w.]+)/,  
  8.         rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,      
  9.         browser = {},  
  10.         ua = window.navigator.userAgent,  
  11.         browserMatch = uaMatch(ua);  
  12.   
  13.         if (browserMatch.browser) {  
  14.             browser[browserMatch.browser] = true;  
  15.             browser.version = browserMatch.version;  
  16.         }  
  17.         return { browser: browser };  
  18.     },  
  19. });  
  20.   
  21. function uaMatch(ua)   
  22. {  
  23.         ua = ua.toLowerCase();  
  24.   
  25.         var match = rwebkit.exec(ua)  
  26.                     || ropera.exec(ua)  
  27.                     || rmsie.exec(ua)  
  28.                     || ua.indexOf("compatible") 0 && rmozilla.exec(ua)  
  29.                     || [];  
  30.   
  31.         return {  
  32.             browser : match[1] || "",  
  33.             version : match[2] || "0"  
  34.         };  
  35. }  

 

 

将以上代码 保存成 jquery-browser.js 使用即可。
posted @ 2016-06-02 11:44  没事看看电影  阅读(281)  评论(0编辑  收藏  举报