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; }
Jquery——實現IE6 7 8 兼容placeholder屬性
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.