jQueryが実装するカスタムPlaceholderプロパティプラグイン

HTML 5のテキストボックスの新しい属性placeholderはとても使いやすい属性ですが、IEシリーズはIE 9までこの属性をサポートしていないので、この属性を使うときにためらっています.自分では共通の小さなコントロールをたくさん書いたことがありますが、あまり通用しません.ここでは、漸進的に強化されたカスタムplaceholderのjQueryプラグインを共有します.少し使いやすいので、皆さんも自分のニーズに合わせて改善することができます.普段はjQueryプラグインを書くことが少なく、jQueryを使う学生が多いことを考慮して、ここではjQueryプラグインの形式で書きました.
ここでは実現の考え方を簡単に紹介します.
1.html 5原生のplaceholderとできるだけ類似することを示す.漸進的な強化placeholderをサポートするブラウザでは処理されません
一、まずいくつかのツール方法です.
1.supportProperty(nodeType,property)は、ブラウザがコントロールをサポートするかどうかの属性を取得する.getPositionInDoc(target,parent)、ドキュメント内のオブジェクトの位置を取得する3.$c,Domオブジェクトをすばやく作成する方法
これらのツールの方法は、自分のものやより適切なものがあれば、自分で置き換えることができます.
二、本体、CustomPlaceholderオブジェクト.このオブジェクトは、主に各テキストボックスの情報を維持し、その位置、表示すべきヒント情報などを含む.また、ヒント情報の作成や位置決めなどの方法、およびオブジェクトの対応するイベントも含む.
イベントは主にinitEvents関数で行われる処理であり,ここで特に注意すべきはプロンプト情報イベントの処理であり,プロンプト情報がクリックされると焦点がテキストボックスに再配置されるべきである.テキストボックスで処理するのはfocusとblurイベントです.

 
  
 $(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オブジェクトの2つの主な方法はcreateHintLabel(text,position)とposition()です.createHintLabelは、プロンプト情報を作成するためのDOMオブジェクトであり、そのオブジェクトを位置決めして返します.positionメソッドは、プロンプトメッセージの再配置を強制するために使用されます.主にページサイズの変更に使用されます.この2つの方法の機能と実現は比較的簡単である.
三、プラグインの機能実現部分.jQueryプラグインの実現方式は多くありません.ここではまず能力検出を行い,placeholderを原生でサポートすれば直接返す.

 
  
 if(supportProperty('input', 'placeholder')){ 
  
  return; 
  
 } 
  
 
 

次に、選択したinputオブジェクトに基づいて、対応するCustomPlaceholderオブジェクトを生成し、配列に保存し、各オブジェクトのヒント情報を取得するDOMオブジェクトをコンテナに追加し、最後にbodyオブジェクトにコンテナを添付します.

 
  
 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イベントをバインドし、windowオブジェクトがresizeイベントをトリガーしたときにすべてのcustomPlacehoderオブジェクトを再配置することです.

 
  
 $(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);