使IE兼容placeholder属性

如题。

        近日在开发的过程中遇到一个问题，还是IE的兼容性问题，在webkit内核的浏览器中，我们可以设置placeholder来在form中的控件里添加提示性语言。但是在IE这个属性是不被支持的。

        在网上逛了很久，找到了一个解决的方法，直接用js模拟：但是，这个方法在IE7下还是会失效。

    //LET IE SUPPORT PLACEHOLDER ATTRIBUTE
    //autofocus
$('[autofocus]:not(:focus)').eq(0).focus(); 
           //placeholder 
          var input = document.createElement("input"); 
          if(('placeholder' in input)==false) { 
               $('[placeholder]').focus(function() { 
                    var i = $(this); 
                    if(i.val() == i.attr('placeholder')) { 
                         i.val('').removeClass('placeholder'); 
                         if(i.hasClass('password')) { 
                              i.removeClass('password'); 
                              this.type='password'; 
                         }               
                    } 
               }).blur(function() { 
                    var i = $(this);     
                    if(i.val() == '' || i.val() == i.attr('placeholder')) { 
                         if(this.type=='password') { 
                              i.addClass('password'); 
                              this.type='text'; 
                         } 
                         i.addClass('placeholder').val(i.attr('placeholder')); 
                    } 
               }).blur().parents('form').submit(function() { 
                    $(this).find('[placeholder]').each(function() { 
                         var i = $(this); 
                         if(i.val() == i.attr('placeholder')) 
                              i.val(''); 
                    }) 
               }); 
          }  

参考张鑫旭大神的文章：http://126.am/Yv8nl0

        有其解决placeholder兼容性的方法。但是这个方法在IE下会使得密码框（input type=password）placeholder变成几个圆点。原因就是他是使用input的value来模拟placeholder。当input是password的时候，模拟出来的效果当然就是圆点了。

http://www.oschina.net/code/snippet_206691_26471下面这个方法是比较靠谱的方法，据说兼容IE6/7/8/9.我在360下面测试是没有问题的。建议各位友友可以在xp下对IE6进行测试哈。

具体的实现思路是，在当前的input外面使用一个等同于input的outerHeight的div来包住，同时使用一个span的position为absolute来放在input上方。这个方法的好处就是兼容性非常好，而且对于真正兼容placeholder的浏览器会自动调用原placeholder方法。然后对于不支持的才实行这个降级操作。使用时注意，由于该方法是直接获取input的outerHeight来设置div的高度，所以，最好input不要有任何的margin padding border等属性，否则，会使得absolute设置的span无法对准整个input框的*。

/*
 * jQuery placeholder, fix for IE6,7,8,9
 * @author JENA
 * @since 20131115.1504
 * @website ishere.cn
 */
var JPlaceHolder = {
//检测
_check : function(){
return 'placeholder' in document.createElement('input');
},
//初始化
init : function(){
if(!this._check()){
this.fix();
}
},
//修复
fix : function(){
jQuery(':input[placeholder]').each(function(index, element) {
            var self = $(this), txt = self.attr('placeholder');
self.wrap($('<div></div>').css({position:'relative', 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, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
self.focusin(function(e) {
                holder.hide();
            }).focusout(function(e) {
                if(!self.val()){
holder.show();
}
            });
holder.click(function(e) {
                holder.hide();
self.focus();
            });
        });
}
};
//执行
jQuery(function(){
JPlaceHolder.init();
});