Jquery——實現IE6 7 8 兼容placeholder屬性

var JPlaceHolder = { 
    //檢測    
	_check : function(){ 
        return 'placeholder' in document.createElement('input'); 
    }, 
    //初始化     
    init : function(){ 
        if(!this._check()){ 
            this.fix(); 
        } 
    }, 
    //修復,該方法簡單,但是有一個弊端:不填寫的時候輸入框也有值,需要在提交表單的時候過濾掉默認值     
    fix : function(){ 
    	$('[placeholder]').focus(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('my-placeholder');
            }
        }).blur(function() {
            var input = $(this);
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.addClass('my-placeholder');
                input.val(input.attr('placeholder'));
            }
        }).blur();
    },
    //修復2,該方法不會出現上述弊端,但是如果輸入框初始是隱藏的話,定位left 和 top可能會出現爲0的情況。這時,可以默認顯示輸入框,再用js在頁面加載完成後隱藏就可以了
    fix : function(){
    	jQuery(':input[placeholder]').each(function(index, element) { 
            var self = $(this), txt = self.attr('placeholder'); 
            var pos = self.position(), h = self.height(), paddingleft = self.css('padding-left'), paddingtop = self.css('padding-top'); 
            var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, paddingLeft:paddingleft,paddingTop:paddingtop, color:'#aaa'}).appendTo(self.parent()); 
            self.focus(function(e) { 
                holder.hide(); 
            }).blur(function(e) { 
                if(self.val()){ 
                	holder.hide();
                }else{
                	holder.show(); 
                }
            }).blur(); 
            holder.click(function(e) { 
                holder.hide(); 
                self.focus(); 
            }); 
        }); 
    }
};
//調用
$(function(){
	JPlaceHolder.init();
});
//css
.my-placeholder{color:#c6c6c6; }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章