IE8中placeholder兼容问题

  placeholder是HTML5中的一个属性,可以在文本框中设置placeholder属性来显示一些提示性的文字,但对IE10以下的浏览器不支持。在IE8下如果贸然使用placeholder,页面上是无法显示的。效果如下所示:

以下有两种方法解决这个问题:

方法一:在页面中添加下面一段脚本

 1 if( !('placeholder' in document.createElement('input')) ){   
 2 
 3     $('input[placeholder],textarea[placeholder]').each(function(){    
 4       var that = $(this),    
 5       text= that.attr('placeholder');    
 6       if(that.val()===""){    
 7         that.val(text).addClass('placeholder');    
 8       }    
 9       that.focus(function(){    
10         if(that.val()===text){    
11           that.val("").removeClass('placeholder');    
12         }    
13       })    
14       .blur(function(){    
15         if(that.val()===""){    
16           that.val(text).addClass('placeholder');    
17         }    
18       })    
19       .closest('form').submit(function(){    
20         if(that.val() === text){    
21           that.val('');    
22         }    
23       });    
24     });    
25   }   

以上方法也存在缺项,就是上面的方法不能支持password类型的文本框,如下所示:

 

第二种方法:调用jQuery的placeholder插件

  插件的地址:https://github.com/mathiasbynens/jquery-placeholder

  将placeholder.js文件引用到页面,页面中添加下面脚本:

   1 $(function() { 2 $('input, textarea').placeholder(); 3 }); 

  效果如下:

转载于:https://www.cnblogs.com/IZHQT/p/5048551.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值