正文

input placeholder兼容ie10以下

IP云
IP云V管理员/3 阅读
06/23
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

代码如下：

if( /msie/.test(navigator.userAgent.toLowerCase()) && $.browser.version.slice(,) < ) {
$('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".

网上有很多解决办法如：

判断浏览器类型：

  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

  1. <span style="white-space:pre">    </span>if ($.browser.msie && 7 > $.browser.version) {}

// New

  1. <span style="white-space:pre">    </span>if ('undefined' == typeof(document.body.style.maxHeight)) {}

检查是否为 IE 6-8：

  1. <span style="white-space:pre">    </span>if (!$.support.leadingWhitespace) {}

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

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

  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. if (browserMatch.browser) {
  13. browser[browserMatch.browser] = true;
  14. browser.version = browserMatch.version;
  15. }
  16. return { browser: browser };
  17. },
  18. });
  19. function uaMatch(ua)
  20. {
  21. ua = ua.toLowerCase();
  22. var match = rwebkit.exec(ua)
  23. || ropera.exec(ua)
  24. || rmsie.exec(ua)
  25. || ua.indexOf("compatible") < 0 && rmozilla.exec(ua)
  26. || [];
  27. return {
  28. browser : match[1] || "",
  29. version : match[2] || "0"
  30. };
  31. }

将以上代码 保存成 jquery-browser.js 使用即可。