placeholder兼容性問題

因爲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();
               });
           });
   }
});