placeholder兼容性问题

Posted 2020-09-20 To be better

由于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();
               });
           });
   }
});