Ein benutzerdefiniertes Platzhalterattribut-Plug-in, das von jQuery_jquery implementiert wird

Der neue Attributplatzhalter des chinesischen HTML5-Textfelds ist ein sehr nützliches Attribut, aber die IE-Serie bis IE9 unterstützt dieses Attribut nicht, was alle bei der Verwendung dieses Attributs zögern lässt. Ich habe viele ähnliche kleine Steuerelemente geschrieben, aber sie sind nicht sehr vielseitig. Hier teile ich ein zunehmend verbessertes benutzerdefiniertes Platzhalter-JQuery-Plug-In. Eine Sache ist, dass es einfach zu bedienen ist und jeder es entsprechend seinen eigenen Bedürfnissen verbessern kann. Normalerweise gibt es relativ wenige geschriebene jQuery-Plugins. Da viele Studenten jQuery verwenden, werde ich es hier in Form eines jQuery-Plugins schreiben.

Hier eine kurze Einführung in die Umsetzungsideen.

1. Die Leistung ist dem nativen Platzhalter von HTML5 so ähnlich wie möglich
2. Die progressive Erweiterung verarbeitet keine Browser, die Platzhalter unterstützen

1. Es gibt mehrere Tools und Methoden:

1.supportProperty(nodeType, property), ermitteln Sie, ob der Browser eine bestimmte Eigenschaft eines bestimmten Steuerelements unterstützt
2.getPositionInDoc(target, parent), ermittelt die Position des Objekts im Dokument
3.$c, eine Methode zum schnellen Erstellen von Dom-Objekten

Bei diesen Tools und Methoden handelt es sich um einige gängige und allgemeine Methoden. Wenn Sie über eigene oder geeignetere Methoden verfügen, können Sie diese selbst ersetzen.

2. Hauptteil, CustomPlaceholder-Objekt. Dieses Objekt verwaltet hauptsächlich die Informationen jedes Textfelds, einschließlich seiner Position, der anzuzeigenden Eingabeaufforderungsinformationen usw. Darüber hinaus enthält es Methoden zum Erstellen von Eingabeaufforderungsinformationen und zur Positionierung sowie die entsprechenden Ereignisse Objekt.

Ereignisse werden hauptsächlich in der Funktion initEvents verarbeitet. Besonderes Augenmerk sollte hier auf die Verarbeitung von Eingabeaufforderungsinformationen gelegt werden. Beim Klicken auf die Eingabeaufforderungsinformationen sollte der Fokus auf das Textfeld verschoben werden. Das Textfeld muss Fokus- und Unschärfeereignisse verarbeiten.

Code kopieren Der Code lautet wie folgt:

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

Die beiden Hauptmethoden des CustomPlacehodler-Objekts sind createHintLabel(text, position) und position(). createHintLabel wird verwendet, um ein DOM-Objekt mit Eingabeaufforderungsinformationen zu erstellen, es zu lokalisieren und dieses Objekt zurückzugeben. Die Positionsmethode wird verwendet, um eine Neupositionierung der Eingabeaufforderungsnachricht zu erzwingen. Wird hauptsächlich verwendet, wenn sich die Seitengröße ändert. Die Funktionen und Implementierung dieser beiden Methoden sind relativ einfach.

3. Der Funktionsimplementierungsteil des Plug-Ins. Ich werde nicht näher auf die Implementierung des jQuery-Plug-ins eingehen. Hier wird zunächst die Fähigkeit überprüft und wenn der Platzhalter nativ unterstützt wird, wird er direkt zurückgegeben.

Code kopieren Der Code lautet wie folgt:

if(supportProperty('input', 'placeholder')){
zurück;
}

Der nächste Schritt besteht darin, das entsprechende CustomPlaceholder-Objekt basierend auf dem ausgewählten Eingabeobjekt zu generieren, es im Array zu speichern, das DOM-Objekt der Eingabeaufforderungsinformationen jedes Objekts abzurufen, es dem Container hinzuzufügen und schließlich den Container anzufügen das Körperobjekt.

Code kopieren Der Code lautet wie folgt:

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);
}

Abschließend gibt es noch eine wichtige Sache: Binden Sie das Größenänderungsereignis an das Fensterobjekt. Wenn das Fensterobjekt das Größenänderungsereignis auslöst, müssen Sie alle benutzerdefinierten Placehoder-Objekte neu positionieren.

Code kopieren Der Code lautet wie folgt:

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

});

Dieses einfache kleine Plug-in ist hier fertig.

Plug-in-Quellcode:

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