input placeholder兼容ie10以下
代码如下:
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".
网上有很多解决办法如:
判断浏览器类型:
- <span style="white-space:pre"> </span>$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
- $.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
- $.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
- $.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
号后面的表达式返回的就是 true/false, 可以直接用来替换原来的 $.browser.msie 等。 检查是否为 IE6:
// Old
- <span style="white-space:pre"> </span>if ($.browser.msie && 7 > $.browser.version) {}
// New
- <span style="white-space:pre"> </span>if ('undefined' == typeof(document.body.style.maxHeight)) {}
检查是否为 IE 6-8:
- <span style="white-space:pre"> </span>if (!$.support.leadingWhitespace) {}
**************************************************************************
下面 我们采取的思路是 使用jquery的继承机制 对jquery 1.11.1版本 进行扩展 使其支持 $.browser 方法,已达到兼容之前组件的目的.
- jQuery.extend({
- browser: function()
- {
- var
- rwebkit = /(webkit)\/([\w.]+)/,
- ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
- rmsie = /(msie) ([\w.]+)/,
- rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
- browser = {},
- ua = window.navigator.userAgent,
- browserMatch = uaMatch(ua);
- if (browserMatch.browser) {
- browser[browserMatch.browser] = true;
- browser.version = browserMatch.version;
- }
- return { browser: browser };
- },
- });
- function uaMatch(ua)
- {
- ua = ua.toLowerCase();
- var match = rwebkit.exec(ua)
- || ropera.exec(ua)
- || rmsie.exec(ua)
- || ua.indexOf("compatible") < 0 && rmozilla.exec(ua)
- || [];
- return {
- browser : match[1] || "",
- version : match[2] || "0"
- };
- }
将以上代码 保存成 jquery-browser.js 使用即可。
input placeholder兼容ie10以下的更多相关文章
- input placeholder 兼容问题
placeholder是html5出的新特性,ie9以下是不兼容的, 那么为了兼容ie9 我们需要对他做处理 //jq的处理方式$(function(){ jQuery('[placeholder] ...
- 兼容ie10以下版本的placeholder属性
<script src="${ctx }/js/jquery.placeholder.js" type="text/javascript">< ...
- IE9以下 placeholder兼容
//input placeholder兼容!(function ($, doc, win) { $.fn.placeholder = function () { var i = doc.createE ...
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...
- 完美让IE兼容input placeholder属性的jquery实现
调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...
- placeholder在不同浏览器下的表现及兼容方法 placeholder兼容
1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...
- placeholder 兼容 IE
placeholder 是 html5 的新属性,仅支持 html5 的浏览器才支持 placeholder,目前最新的 FF.Chrome.Safari.Opera 以及 IE10 都支持,IE6- ...
- HTML5 input placeholder 颜色修改示例
Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码 代码如下: input[placeholder], [placeholder], *[p ...
- placeholder兼容
<!------------placeholder兼容-------------><script type="text/javascript"> $( ...
随机推荐
- 项目<<魔兽登录系统>>
创建魔兽系统相关窗体: 登录窗体(frmLogin) 注册窗体(frmRegister) 主窗体 (frmMain) 实现魔兽登录系统: 登录的界面如下 实现思路: 1.创建一个对象数组,长度为1 ...
- dwarf格式解析
debug_line中包含的是地址和源文件行之间的关系 我今天想搞清楚的是文件的C代码和汇编代码之间的关系: 对这块之前一直是迷迷糊糊的,发现这个问题已经严重影响到bug的定位了. 之前感觉C和汇编不 ...
- ES5基础之正则表达式02:范围类、预定义类和边界字符
1.范围类 //元字符 /* * 正则表达式由两种基本字符类型组成 * 1.原义文本字符:例如123abc * 2.元字符:元字符是在正则表达式中有特殊含义的非字母字符 */ //常见特殊符号:. * ...
- jS字符串大小写转换实现方式
toLocaleUpperCase 方法:将字符转换为大写 stringVar.tolocaleUpperCase( ) 必选的 stringVar 引用是一个 String 对象,值或文字. //转 ...
- .net Core学习笔记:Windows环境搭建
1.安装 VS2015 Update3.如果已经安装了VS2015,但不是Update3版本,请在VS的工具 --> 扩展与更新 中执行update3的升级(大约需要2小时). 2..net C ...
- 【原】Spark学习总结-六个专题
最近从hadoop转向Spark了,学了一段时间了,准备写个专题,主要写pySpark的应用,主要计划是: 主题 内容概要 聚类(5.6) 1.几种常用的聚类算法:2.pyspark中聚类算法的应用( ...
- 《JavaScript高级程序设计》 - 读书笔记 - 第5章 引用类型
5.1 Object 类型 对象是引用类型的实例.引用类型是一种数据结构,用于将数据和功能组织在一起. 新对象是使用new操作符后跟一个构造函数来创建的.构造函数本身就是一个函数,只不过该函数是出于创 ...
- javascript 中断函数的使用 setInterval()——返回顶部
方法名称:gotop() 功能描述:点击某个元素,调用方法gotop(),固定间隔,滚动至屏幕顶部 日期 :2016.06.06 16:02 author :cyh2009@live.com < ...
- sys
sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) sys.version 获取Python解释程序的版本信息 sys.maxi ...
- BZOJ 1432: [ZJOI2009]Function
1432: [ZJOI2009]Function Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1046 Solved: 765[Submit][Sta ...