由于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兼容性问题的更多相关文章

  1. 解决input 中placeholder的那些神坑

    **昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家..** ============================================== 一 ...

  2. 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...

  3. placeholder右对齐的写法,兼容性比较高的一种方法

    placeholder右对齐的写法,如果你不考虑移动端的话,完全可以使用text-align:right,不过如果考虑移动端的话,在有一些手机上,即使你写了text-align:right,place ...

  4. 对于placeholder浏览器兼容性(包括密码输入框)解决办法

    将以下脚本和样式引入你的页面(对于密码输入框,要设置ID属性值): <script type="text/javascript"> $(function () { // ...

  5. input placeholder属性IE、360浏览器兼容性问题

    效果:http://hovertree.com/texiao/jquery/43/ 效果二:http://hovertree.com/texiao/jquery/43/1/ 请在IE中体验. 1.创建 ...

  6. placeholder的兼容性探索之路

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. placeholder在IE8中兼容性问题解决

    placeholder是HTML5中的一个属性,可以在文本框中设置placeholder属性来显示一些提示性的文字,但对IE10以下的浏览器不支持,下面方法可以让placeholder能够使用在IE1 ...

  8. 解决HTML5中placeholder属性兼容性的JQuery插件

    //调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...

  9. IE8 placeholder不支持的兼容性处理

    引入 <script type="text/javascript" src="<%=path%>/common/js/jquery/jquery.min ...

随机推荐

  1. 『流畅的Python』第9章笔记_对象

    一.Python风格 以一个二元素向量对象为例 import math from array import array class Vector2d: typecode = 'd' def __ini ...

  2. java中堆与栈的区别

    堆与栈都是java中常用的存储结构,是内存中存放数据的地方. 堆:主要存放运行时创建(new)的对象.主要用于储存对象,存取速度慢,可以运行时动态分配内存,生命周期不需要提前确定. 栈:主要存放基础类 ...

  3. CF-517C-思维/math

    http://codeforces.com/contest/1072/problem/C 题目大意是给出两个数a,b ,找出若干个数p,使得 SUM{p}<=a ,找出若干个数q使得SUM{q} ...

  4. org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'list' in 'c

     org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'list' in ' ...

  5. 2015-09-21 css学习1

    3.设置背景图片 Background-image:url(相对路径) ----123.jpg 图片拉伸铺满: background-size:cover 铺满方向: background-repea ...

  6. 如何把一个杯子卖到上万元,不学你就OUT了

    我们可以看看一个产品卖到多少钱需要占有什么样的资源: 第1种卖法:卖产品本身的使用价值,只能卖3元/个 如果你将他仅仅当一只普通的杯子,放在普通的商店,用普通的销售方法,也许它最多只能卖3元钱,还可能 ...

  7. js正则表达式取{}中的值

    var reg = /[^\{}]*\{(.*)\}[^\}]*/; var str = "1111{122}"; console.log(str.replace(reg,'$1' ...

  8. 【框架】用excel管理测试用例需要的参数数据(二)

    一.总体思路 以类为excel名,测试方法名为sheet名,建立excel文件.用jxl包里的方法去读取excel文件里的内容,然后用testng里的dataprovider,将数据传递给测试用例 二 ...

  9. js-数组方法的使用和详谈

    写博客的同时也是对自己知识的一次全面总结,方便自己日后复习.今天总结一下JS中Array的所有方法和技巧,对算法题算是一个基础了,有不足的地方,还望童鞋们指出来,一起进步. 在总结方法之前,提到一点, ...

  10. UVa LA 3213 - Ancient Cipher 水题 难度: 0

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...