码迷,mamicode.com
首页 > 其他好文 > 详细

placeholder兼容性问题

时间:2017-05-31 19:11:15      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:put   osi   背景图   cti   div   解决   show   blog   .sh   

由于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兼容性问题

标签:put   osi   背景图   cti   div   解决   show   blog   .sh   

原文地址:http://www.cnblogs.com/laoniaofly/p/6925131.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!