代码如下:

 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 使用即可。

input placeholder兼容ie10以下的更多相关文章

  1. input placeholder 兼容问题

    placeholder是html5出的新特性,ie9以下是不兼容的, 那么为了兼容ie9  我们需要对他做处理 //jq的处理方式$(function(){ jQuery('[placeholder] ...

  2. 兼容ie10以下版本的placeholder属性

    <script src="${ctx }/js/jquery.placeholder.js" type="text/javascript">< ...

  3. IE9以下 placeholder兼容

    //input placeholder兼容!(function ($, doc, win) { $.fn.placeholder = function () { var i = doc.createE ...

  4. 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

    <完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...

  5. 完美让IE兼容input placeholder属性的jquery实现

    调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...

  6. placeholder在不同浏览器下的表现及兼容方法 placeholder兼容

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  7. placeholder 兼容 IE

    placeholder 是 html5 的新属性,仅支持 html5 的浏览器才支持 placeholder,目前最新的 FF.Chrome.Safari.Opera 以及 IE10 都支持,IE6- ...

  8. HTML5 input placeholder 颜色修改示例

    Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码 代码如下: input[placeholder], [placeholder], *[p ...

  9. placeholder兼容

    <!------------placeholder兼容-------------><script type="text/javascript">    $( ...

随机推荐

  1. NOIP2001统计单词个数[序列DP]

    题目描述 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1<k<=40),且每份中包含的单 ...

  2. android第一行代码-2.activity基本用法

    摘要: 本节主要涉及到的有activity的创建,标题栏隐藏,button绑定方法(toast的使用),menu使用,活动销毁 1.activity的创建跟注册 创建: public class Te ...

  3. button

  4. ComponetArt Upload上传组件

    componentArt的组件很炫,但示例并非单独的,要分离开来用还得费一番周折. 一个不经意问题,足足困扰了一好几天,服务器的时间不对,导致控件无法正常显示,无浏览文件按钮 看来,控件的开发者设定了 ...

  5. C#基础系列——委托实现简单设计模式

    前言:上一篇介绍了下多线程的相关知识:C#基础系列——多线程的常见用法详解,里面就提到了委托变量.这篇简单介绍下委托的使用.当然啦,园子里面很多介绍委托的文章都会说道:委托和事件的概念就像一道坎,过了 ...

  6. 通过COOKIE欺骗登录网站后台

    1.今天闲着没事看了看关于XSS(跨站脚本攻击)和CSRF(跨站请求伪造)的知识,xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语 ...

  7. CSS基本知识4-CSS行模型

    display:inline.block.inline-block block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 i ...

  8. 【IIS】iis6.1下添加两个ftp站点,

    1,添加本地账户或密码||组  :[控制面板-->管理工具-->计算机管理器-->系统工具-->本地用户和组] 2,IIS站点目录先(添加FTP站点)[注意:多个站点多个端口] ...

  9. 常见排序java实现

    public class Sort { public static void main(String[] args) { int[] data = {49,38,65,97,76,13,27,49}; ...

  10. XRecyclerView Scrapped or attached views may not be recycled

    将XRecyclerView布局设置为 android:layout_width="match_parent"android:layout_height="match_p ...