//placeholder兼容方法(兼容IE8以上浏览器)
var JPlaceHolder = {
//检测
_check: function () {
return 'placeholder' in document.createElement('input');
},
//初始化
init: function () {
if (!this._check()) {
this.fix();
}
},
//修复
fix: function () {
jQuery(':input[placeholder]').each(function (index, element) {
var self = $(this), txt = self.attr('placeholder');
self.wrap($('<div></div>').css({
position: 'relative',
zoom: '1',
border: 'none',
background: 'none',
padding: 'none',
margin: 'none'
}));
var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
//此处的css样式,根据情况修改
var holder = $('<span></span>').text(txt).css({
position: 'absolute',
left: pos.left,
// top: pos.top,
height: h + 'px',
lineHeight: h + 'px',
paddingLeft: paddingleft,
color: '#aaa',
paddingTop: '15px',
textAlign: 'center',
width: '347px'
}).appendTo(self.parent());
self.focusin(function (e) {
holder.hide();
}).focusout(function (e) {
if (!self.val()) {
holder.show();
}
});
holder.click(function (e) {
holder.hide();
self.focus();
});
});
}
};
//执行placeholder兼容方法
jQuery(function () {
JPlaceHolder.init();
});

placeholder兼容方法(兼容IE8以上浏览器)的更多相关文章

  1. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  2. IE8及以下浏览器伪数组slice方法兼容处理

    前几天同事说数组的slice方法在IE8下有兼容问题,我查阅了MDN,文档里面有提到IE8及以下浏览器中,DOM对象组成的伪数组通过call调用slice方法没有遵循标准行为 我做了个demo在IE8 ...

  3. JS--事件对象中部份浏览器不兼容方法

    测试时主要用的浏览器是Firefox 28.0.IE11.IE8.Chrome 34.0  一.什么是事件对象:当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,包括导致 ...

  4. Javascript不同浏览器差异及兼容方法

    原文链接:http://caibaojian.com/js-ie-different-from-firefox.html javascript的各种兼容就是为了解决不同浏览器的差异性,了解其中的差异能 ...

  5. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  6. 使用FlashWavRecorder实现浏览器录制wav音频和上传音频文件,兼容IE8以上浏览器

    前言:本项目基于github开源插件实现,该插件使用flash实现,兼容IE8以上浏览器 感谢michalstocki的分享该项目,github项目地址:https://github.com/mich ...

  7. google浏览器window.onbeforeunload方法兼容问题

    window.onbeforeunload方法在IE内核浏览器是有效的,但是在google浏览器中并不兼容,请教给位怎么在google浏览器中兼容window.onbeforeunload方法 采纳的 ...

  8. 阻止a标签跳转四种方法 兼容各大浏览器(包括IE)

    阻止a标签跳转四种方法 兼容各大浏览器(包括IE) HTML <!--第一种--> <a href="javascript:;">我不会被跳转</a& ...

  9. 下拉菜单select高度(兼容IE6/IE7/IE8/火狐等主流浏览器)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. HDU 1811

    http://acm.hdu.edu.cn/showproblem.php?pid=1811 中文码题 对于等号的情况,用并查集合并(因为编号不同一定可以分出先后) 然后判断能否构成拓扑排序,以及拓扑 ...

  2. WCF服务端行为的一些设置

    [ServiceBehavior( InstanceContextMode = InstanceContextMode.Single,   //表示所有的请求都用一个服务实例来处理 Concurren ...

  3. 配置集成环境xampp-win32-1.7.0-installer.exe

    第一步:准备当然要有xampp-win32-1.7.0-installer.exe这个软件了啊,大家可以去网站上下载这个就不必多说了吧在安装之前一定要将apache,mysql,httpd这一系列进程 ...

  4. excel表里的数据导入到数据库里

    采用的是jxl,所以需要导jxl-2.4.2.jar的jar包.(前提知道excel表的目录): //用log记录异常信息 private static final Logger log = Logg ...

  5. C++学习笔记35:函数模板

    函数模板 函数模板的目的 设计通用的函数,以适应广泛的数据型式 函数模板的定义格式 template<模板型式参数列表>返回值型式 函数名称(参数列表): 原型:template<c ...

  6. jq中阻止元素的默认行为

    event.preventDefault();//阻止元素的默认行为

  7. tomcat实现文件打开下载功能

    omcat作为http的下载服务器,网上有很多办法 但我认为最简单的是: 1.直接把文件放在 tomcat6/webapps/ROOT 目录下, 2.然后在网址中访问: http://192.168. ...

  8. Chrome A标签的迁移错误:【Error loading page】

    在IE中经常使用A标签用来迁移,正确的写法是 <a href="001.html"></a>即可,不过在chrome上面可能会引发错误无法迁移. 比如用下面 ...

  9. 控制文本和外观------CSS Binding(CSS类名绑定)

    <style> .myColor{color:red;font-size:13px} .yourColor{color:green;font-size:34px}</style> ...

  10. 学习ARM7、ARM9的操作系统选择经验! [转]

    一 首先说说ARM的发展        可以用一片大好来形容,翻开各个公司的网站,招聘里面嵌入式占据了大半工程师职位.广义的嵌入式无非几种:传统的什么51.AVR.PIC称做嵌入式微控制器:ARM是嵌 ...