jQuery_jquery によって実装されたカスタム プレースホルダー属性プラグイン

HTML5 中国語テキスト ボックスの新しい属性プレースホルダーは非常に便利な属性ですが、IE9 までの IE シリーズではこの属性がサポートされていないため、この属性を使用する際に誰もが躊躇します。私は同様の小さなコントロールをたくさん作成しましたが、あまり汎用性がありません。ここでは、徐々に強化されたカスタム プレースホルダー jQuery プラグインを紹介します。 1 つは、使い方が簡単で、誰もが自分のニーズに応じて改良できるということです。通常、jQuery プラグインは比較的少ないですが、多くの学生が jQuery を使用することを考慮して、ここでは jQuery プラグインの形式で記述します。

ここでは、実装のアイデアを簡単に紹介します。

1. パフォーマンスは html5 のネイティブ プレースホルダーと可能な限り類似しています
2. プログレッシブ拡張機能は、プレースホルダー

をサポートするブラウザーを処理しません。

1. まず、いくつかのツールと方法:

1.supportProperty(nodeType, property)、ブラウザが特定のコントロールの特定のプロパティをサポートしているかどうかを取得します
2.getPositionInDoc(target,parent)、ドキュメント内のオブジェクトの位置を取得します
3.$c、Dom オブジェクトを素早く作成するメソッド

これらのツールと方法は一般的な方法の一部であり、独自のまたはより適切な方法がある場合は、自分で置き換えることができます。

2. 本体、CustomPlaceholder オブジェクト。 このオブジェクトは主に、各テキスト ボックスの位置、表示するプロンプト情報などの情報を保持します。さらに、プロンプト情報と位置を作成するためのメソッド、およびテキスト ボックスの対応するイベントも含まれています。物体。

イベントは主に initEvents 関数で処理されます。ここでは、プロンプト情報イベントの処理に特に注意を払う必要があります。プロンプト情報をクリックすると、フォーカスがテキスト ボックスに移動する必要があります。テキスト ボックスはフォーカス イベントとブラー イベントを処理する必要があります。

コードをコピーします コードは次のとおりです:

$(self.hint).bind( 'クリック', 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 = 'インライン';
}
});

CustomPlacehodler オブジェクトの 2 つの主なメソッドは、createHintLabel(text,position) とposition() です。 createHintLabel は、プロンプト情報の DOM オブジェクトを作成し、それを見つけて、このオブジェクトを返すために使用されます。 Position メソッドは、プロンプト メッセージの位置を強制的に変更するために使用されます。主にページサイズが変更される場合に使用されます。これら 2 つのメソッドの機能と実装は比較的単純です。

3. プラグインの機能実装部分。 jQuery プラグインの実装方法については詳しく説明しません。ここでは、最初に機能がチェックされ、プレースホルダーがネイティブにサポートされている場合は、プレースホルダーが直接返されます。

コードをコピー コードは次のとおりです:

if(supportProperty('input', 'placeholder')){
戻る;
}

次のステップでは、選択した入力オブジェクトに基づいて対応する CustomPlaceholder オブジェクトを生成し、配列に保存し、各オブジェクトのプロンプト情報の DOM オブジェクトを取得してコンテナーに追加し、最後にコンテナーをアタッチします。本体オブジェクト。

コードをコピー コードは次のとおりです:

varcustomPlaceholders = [];
if(this.length > 0){
var box = $c('div', 'dk_placeholderfixed_box');
for(var i = 0, len = this.length; i var input = this[i];
CustomPlaceholders.push(new CustomPlaceholder(ボックス, 入力, オプション));
}

document.body.appendChild(box);
}

最後に、もう 1 つ重要なことがあります。ウィンドウ オブジェクトがサイズ変更イベントをトリガーするときに、すべての CustomPlacehoder オブジェクトの位置を変更します。

コードをコピー コードは次のとおりです:

$(window).bind( 'サイズ変更', function(e){
for(var i = 0, len =customPlaceholders.length; i varcustomPlaceholder =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);