placeholder兼容性问题
由于placeholder是H5新属性,IE9及以下都不支持
解决办法:给input添加一个背景图,背景图里面添加placeholder内容,当焦点落在输入框中,背景图隐藏,即可做出类似的效果
代码:
//引入jQuery框架
$(function(){
if(!('placeholder' in document.createElement('input'))){
jQuery(':input[placeholder]').each(function(index, element) {
var self = $(this), txt = self.attr('placeholder');
self.wrap($('<div></div>').css({position:'relative',float:'left', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
var holder = $('<span></span>').text(txt).css({'position':'absolute',
'left':pos.left, 'top':pos.top,
'height':h, 'line-Height':h+'px',
'paddingLeft':paddingleft, 'color':'#aaa'}).appendTo(self.parent());
self.focusin(function(e) {
holder.hide();
}).focusout(function(e) {
if(!self.val()){
holder.show();
}else{
holder.hide();
}
});
holder.click(function(e) {
holder.hide();
self.focus();
});
});
}
});
placeholder兼容性问题的更多相关文章
- 解决input 中placeholder的那些神坑
**昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家..** ============================================== 一 ...
- 解决input标签placeholder属性浏览器兼容性问题的一种方法
为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...
- placeholder右对齐的写法,兼容性比较高的一种方法
placeholder右对齐的写法,如果你不考虑移动端的话,完全可以使用text-align:right,不过如果考虑移动端的话,在有一些手机上,即使你写了text-align:right,place ...
- 对于placeholder浏览器兼容性(包括密码输入框)解决办法
将以下脚本和样式引入你的页面(对于密码输入框,要设置ID属性值): <script type="text/javascript"> $(function () { // ...
- input placeholder属性IE、360浏览器兼容性问题
效果:http://hovertree.com/texiao/jquery/43/ 效果二:http://hovertree.com/texiao/jquery/43/1/ 请在IE中体验. 1.创建 ...
- placeholder的兼容性探索之路
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- placeholder在IE8中兼容性问题解决
placeholder是HTML5中的一个属性,可以在文本框中设置placeholder属性来显示一些提示性的文字,但对IE10以下的浏览器不支持,下面方法可以让placeholder能够使用在IE1 ...
- 解决HTML5中placeholder属性兼容性的JQuery插件
//调用方法 $(function () { $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...
- IE8 placeholder不支持的兼容性处理
引入 <script type="text/javascript" src="<%=path%>/common/js/jquery/jquery.min ...
随机推荐
- Appium 自动化测试(1)--环境安装:安装Appium
一.安装nodejs Node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 安装过程参考:http://www.runoob.com/nodejs/n ...
- E. Intersection of Permutations
题意:给两个排列,2种操作1,查询两个区间a和b一样的值个数,2,交换b的两个值 题解:树套树,先把a变成1到n的排列,对b做相同的变换,然后问题就变成了查询区间lb,rb中la到ra的个数,带修改可 ...
- ALV打印模板(存代码)
*&---------------------------------------------------------------------* *& Report ZMMF013 * ...
- AWS EC2 MySQL迁移到RDS案例
Amazon Relational Database Service (Amazon RDS) 是一种Web 服务,可让用户更轻松地在云中设置.操作和扩展关系数据库.它可以为行业标准关系数据库提供经济 ...
- Mybatis中tinyint(1)数据自动转化为boolean处理
问题描述:使用Mybatis查询tinyint(1)字段数据,返回值为Map类型,那么tinyint(1)的数据默认会转化为boolean类型数据.解决方案: 1.使用ifnull(column, ...
- [CodeForces - 197F] F - Opening Portals
F - Opening Portals Pavel plays a famous computer game. A player is responsible for a whole country ...
- iOS block 机制
本文要将block的以下机制,并配合具体代码详细描述: block 与 外部变量 block 的存储域:栈块.堆块.全局块 定义 块与函数类似,只不过是直接定义在另一个函数里,和定义它的那个函数共享同 ...
- 解决iOS第三方SDK之间重复的symbols问题
前言:今天公司项目准备使用高德导航,其中用到了高德3D地图SDK,然后就出现bug了.在真机上可以完美运行,但是在模拟器上,就出现了一大片的bug:提示有82个Duplicate symbols,仔细 ...
- git reset --hard 恢复
git reset --hard ,再然后,悲剧上演~ 恢复方法: 使用 git reflog 来找到最近提交的信息,这里贴出部分信息: F:\voidy>git reflog WARNING: ...
- Linux Shell获取系统资源使用百分比(CentOS)
CPU使用率: top -b -n | | 内存使用率: free -m | grep '^-' | awk '{print $3/($3+$4)*100"%"}' IO使用率(F ...