jQuery實現(xiàn)的一個自定義Placeholder屬性插件

更新時間：2014年08月11日 11:44:34 投稿：junjie

這篇文章主要介紹了jQuery實現(xiàn)的一個自定義Placeholder屬性插件,本文最后附有插件完整源碼,需要的朋友可以參考下

HTML5中文本框的新屬性placeholder是個非常好用的屬性，但是IE系列直至IE9都不支持這一屬性，這就讓大家在用這一屬性的時候有些猶豫不決。自己曾經(jīng)寫過很多類似共的小控件，但是都不是很通用，這里分享一個漸進(jìn)增強的自定義placeholder的jQuery插件。有點是使用簡單，大家也可以根據(jù)自己的需要進(jìn)行改進(jìn)。平常寫jQuery插件比較少，考慮到用jQuery的同學(xué)比較多，這里就用jQuery插件的形式編寫了。

在這里簡單的介紹一下實現(xiàn)思路。

1.表現(xiàn)與html5原生的placeholder盡量類似
2.漸進(jìn)增強對于支持placeholder的瀏覽器不做處理

一、首先是幾個工具方法：

1.supportProperty(nodeType, property)，獲取瀏覽器是否支持某一控件的某一屬性
2.getPositionInDoc(target, parent)，獲取對象在文檔中的位置
3.$c，一個快速創(chuàng)建Dom對象的方法

這幾個工具方法都是一些比較常見通用的方法，如果你有自己的或者更合適的可以自行替換。

二、主體，CustomPlaceholder對象。這個對象主要是維護(hù)每一個文本框的信息，包括其位置，應(yīng)該顯示的提示信息等等，另外它還包含創(chuàng)建提示信息以及定位等方法以及對象的相應(yīng)事件。

事件主要是在initEvents函數(shù)中進(jìn)行的處理，這里特別要注意的是對提示信息事件的處理，當(dāng)提示信息被點擊時焦點應(yīng)該被重新定位到文本框。而文本框要處理的則是focus和blur事件。

復(fù)制代碼代碼如下:

$(self.hint).bind( 'click', function(e){
self.input.focus();
});

$(self.input).bind( 'focus', function(e){
self.hint.style.display = 'none';
});

$(self.input).bind( 'blur', function(e){
if(this.value == ''){
self.hint.style.display = 'inline';
}
});

CustomPlacehodler對象的兩個主要方法是createHintLabel(text, position)和position()。createHintLabel是用于創(chuàng)建提示信息的DOM對象并對其進(jìn)行定位，并返回這個對象。position方法用于強制對提示消息進(jìn)行重新定位。主要用于頁面大小改變的情況。這兩個方法的功能和實現(xiàn)都比較簡單。

三、插件的功能實現(xiàn)部分。jQuery插件實現(xiàn)方式就不多說了。這里首先進(jìn)行了能力檢測，如果原生支持placeholder則直接返回。

復(fù)制代碼代碼如下:

if(supportProperty('input', 'placeholder')){

 return;

}

接下來是根據(jù)選擇的input對象，生成相應(yīng)的CustomPlaceholder對象，保存在數(shù)組中，并獲取每個對象的提示信息的DOM對象，添加到容器中，最后將容器附加到body對象中。

復(fù)制代碼代碼如下:

var customPlaceholders = [];
if(this.length > 0){
var box = $c('div', 'dk_placeholderfixed_box');
for(var i = 0, len = this.length; i < len; i++){
var input = this[i];
customPlaceholders.push(new CustomPlaceholder(box, input, option));
}

document.body.appendChild(box);
}

最后還有一件比較重要的事情，為window對象綁定resize事件，當(dāng)window對象觸發(fā)resize事件時對所有的customPlacehoder對象進(jìn)行重新定位。

復(fù)制代碼代碼如下:

$(window).bind( 'resize', function(e){
for(var i = 0, len = customPlaceholders.length; i < len; i++){
var customPlaceholder = customPlaceholders[i];
customPlaceholder.position();
}

});

這個簡單的小插件到這里就寫完了。

插件源碼：

(function($){

var eles = {
	div: document.createElement('div'),
	ul: document.createElement('ul'),
	li: document.createElement('li'),
	span: document.createElement('span'),
	p: document.createElement('p'),
	a: document.createElement('a'),
	fragment: document.createDocumentFragment(),
	input: document.createElement('input')
}
	
var supportProperty = function(nodeType, property){
	switch(arguments.length){
		case 0:
			return false;
		case 1:
			var property = nodeType, nodeType = 'div';
			property = property.split('.');
			
			if(property.length == 1){
				return typeof eles[nodeType][property[0]] !== 'undefined';
			}else if(property.length == 2){
				return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
			}
		case 2:
			property = property.split('.');
			
			if(property.length == 1){
				return typeof eles[nodeType][property[0]] !== 'undefined';
			}else if(property.length == 2){
				return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
			}
			
			return false;
			
			
		default:
			return false;
	}
};

var getPositionInDoc = function(target, parent) {
	if (!target) {
		return null;
	}
	var left = 0,
		top = 0;
	do {
		left += target.offsetLeft || 0;
		top += target.offsetTop || 0;
		target = target.offsetParent;
		if(parent && target == parent){
			break;
		}
	} while (target);
	return {
		left: left,
		top: top
	};
}

var $c = function(tagName, id, className){
	var ele = null;
	if(!eles[tagName]){
		ele = eles[tagName] = document.createElement(tagName);
	}else{
		ele = eles[tagName].cloneNode(true);
	}
	if(id){
		ele.id = id;
	}
	if(className){
		ele.className = className;
	}
	return ele;
};
	
var CustomPlaceholder = function(box, input, option){
	var self = this;
	var position = getPositionInDoc(input);
	self.input = input;
	
	self.option = {xOffset:0, yOffset:0};
	for(var item in option){
		self.option[item] = option[item];
	}
	self.hint = self.createHintLabel(input.getAttribute('placeholder'), position);
	box.appendChild(self.hint);
	
	self.initEvents = function(){
		$(self.hint).bind( 'click', function(e){
			self.input.focus();
		});
		
		$(self.input).bind( 'focus', function(e){
			self.hint.style.display = 'none';
		});
		
		$(self.input).bind( 'blur', function(e){
			if(this.value == ''){
				self.hint.style.display = 'inline';
			}
		});
	};
	
	self.initEvents();
};

CustomPlaceholder.prototype = {
	createHintLabel: function(text, position){
		var hint = $c('label');
		hint.style.cusor = 'text';
		hint.style.position = 'absolute';
		hint.style.left = position.left + this.option.xOffset + 'px';
		hint.style.top = position.top + this.option.yOffset + 'px';
		hint.innerHTML = text;
		hint.style.zIndex = '9999';
		return hint;
	},
	position: function(){
		var position = getPositionInDoc(this.input);
		this.hint.style.left = position.left + this.option.xOffset + 'px';
		this.hint.style.top = position.top + this.option.yOffset + 'px';
	}
};

$.fn.placeholder = function(option){
	if(supportProperty('input', 'placeholder')){
		return;
	}
	var customPlaceholders = [];
	if(this.length > 0){
		var box = $c('div', 'dk_placeholderfixed_box');
		for(var i = 0, len = this.length; i < len; i++){
			var input = this[i];
			if($(input).is(':visible')){
				customPlaceholders.push(new CustomPlaceholder(box, input, option));
			}
		}
		
		document.body.appendChild(box);
	}
	
	$(window).bind( 'resize', function(e){
		for(var i = 0, len = customPlaceholders.length; i < len; i++){
			var customPlaceholder = customPlaceholders[i];
			customPlaceholder.position();
		}
		
	});
};

})(jQuery);

您可能感興趣的文章: