Maison interface Web js tutoriel Un plug-in d'attribut Placeholder personnalisé implémenté par jQuery_jquery

Un plug-in d'attribut Placeholder personnalisé implémenté par jQuery_jquery

May 16, 2016 pm 04:40 PM
jquery

Le nouvel espace réservé d'attribut de la zone de texte HTML5 chinois est un attribut très utile, mais la série IE jusqu'à IE9 ne prend pas en charge cet attribut, ce qui rend tout le monde hésitant lors de l'utilisation de cet attribut. J'ai écrit de nombreux petits contrôles similaires, mais ils ne sont pas très polyvalents. Je partage ici un plug-in jQuery d'espace réservé personnalisé progressivement amélioré. Une chose est qu'il est simple à utiliser et que chacun peut l'améliorer selon ses propres besoins. Habituellement, il y a relativement peu de plug-ins jQuery écrits étant donné que de nombreux étudiants utilisent jQuery, je vais l'écrire ici sous la forme d'un plug-in jQuery.

Voici une brève introduction aux idées de mise en œuvre.

1. Les performances sont aussi similaires que possible à l'espace réservé natif de html5
2. L'amélioration progressive ne traite pas les navigateurs prenant en charge l'espace réservé

1. Premièrement, il existe plusieurs outils et méthodes :

1.supportProperty(nodeType, property), indique si le navigateur prend en charge une certaine propriété d'un certain contrôle
2.getPositionInDoc(target, parent), récupère la position de l'objet dans le document
3.$c, une méthode pour créer rapidement des objets Dom

Ces outils et méthodes sont des méthodes courantes et générales. Si vous possédez les vôtres ou des méthodes plus adaptées, vous pouvez les remplacer par vous-même.

2. Corps principal, objet CustomPlaceholder. Cet objet conserve principalement les informations de chaque zone de texte, y compris sa position, les informations d'invite qui doivent être affichées, etc. De plus, il contient également des méthodes de création d'informations d'invite et de positionnement, ainsi que les événements correspondants de la objet.

Les événements sont principalement traités dans la fonction initEvents. Une attention particulière doit être accordée ici au traitement des événements d'informations d'invite. Lorsque vous cliquez sur les informations d'invite, le focus doit être repositionné sur la zone de texte. La zone de texte doit gérer les événements de focus et de flou.

Copier le code Le code est le suivant :

$(self.hint).bind( 'clic', fonction(e){
self.input.focus();
});

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

$(self.input).bind( 'flou', fonction(e){
si(this.value == ''){
self.hint.style.display = 'inline';
>
});

Les deux méthodes principales de l'objet CustomPlacehodler sont createHintLabel(text, position) et position(). createHintLabel est utilisé pour créer un objet DOM contenant des informations d'invite, le localiser et renvoyer cet objet. La méthode de position est utilisée pour forcer le repositionnement du message d'invite. Principalement utilisé lorsque la taille de la page change. Les fonctions et la mise en œuvre de ces deux méthodes sont relativement simples.

3. La partie implémentation des fonctions du plug-in. Je n'entrerai pas dans les détails sur la façon d'implémenter le plug-in jQuery. Ici, la fonctionnalité est vérifiée en premier, et si l'espace réservé est pris en charge nativement, il sera renvoyé directement.

Copier le code Le code est le suivant :

if(supportProperty('input', 'placeholder')){
revenir ;
>

L'étape suivante consiste à générer l'objet CustomPlaceholder correspondant en fonction de l'objet d'entrée sélectionné, à l'enregistrer dans le tableau, à obtenir l'objet DOM des informations d'invite de chaque objet, à l'ajouter au conteneur et enfin à attacher le conteneur à l'objet corps.

Copier le code Le code est le suivant :

var customPlaceholders = [];
si (this.length > 0) {
var box = $c('div', 'dk_placeholderfixed_box');
pour(var je = 0, len = this.length; je < len; je ){
var entrée = this[i];
customPlaceholders.push(new CustomPlaceholder(box, input, option));
>

document.body.appendChild(box);
>

Enfin, il y a encore une chose importante. Liez l'événement resize à l'objet window Lorsque l'objet window déclenche l'événement resize, repositionnez tous les objets customPlacehoder.

Copier le code Le code est le suivant :

$(window).bind( 'redimensionner', fonction(e){
pour (var i = 0, len = customPlaceholders.length; i < len; i ){
var customPlaceholder = customPlaceholders[i];
customPlaceholder.position();
>

});

Ce simple petit plug-in est terminé ici.

Code source du plug-in :

(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 &gt; 0){
		var box = $c('div', 'dk_placeholderfixed_box');
		for(var i = 0, len = this.length; i &lt; 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 &lt; len; i++){
			var customPlaceholder = customPlaceholders[i];
			customPlaceholder.position();
		}
		
	});
};

})(jQuery);
Copier après la connexion
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide Feb 27, 2024 pm 06:45 PM

Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide

Comment utiliser la méthode de requête PUT dans jQuery ? Comment utiliser la méthode de requête PUT dans jQuery ? Feb 28, 2024 pm 03:12 PM

Comment utiliser la méthode de requête PUT dans jQuery ?

Comment supprimer l'attribut height d'un élément avec jQuery ? Comment supprimer l'attribut height d'un élément avec jQuery ? Feb 28, 2024 am 08:39 AM

Comment supprimer l'attribut height d'un élément avec jQuery ?

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Feb 28, 2024 pm 09:06 PM

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page

Utilisez jQuery pour modifier le contenu textuel de toutes les balises Utilisez jQuery pour modifier le contenu textuel de toutes les balises Feb 28, 2024 pm 05:42 PM

Utilisez jQuery pour modifier le contenu textuel de toutes les balises

Analyse approfondie : les avantages et les inconvénients de jQuery Analyse approfondie : les avantages et les inconvénients de jQuery Feb 27, 2024 pm 05:18 PM

Analyse approfondie : les avantages et les inconvénients de jQuery

Comprendre le rôle et les scénarios d'application de eq dans jQuery Comprendre le rôle et les scénarios d'application de eq dans jQuery Feb 28, 2024 pm 01:15 PM

Comprendre le rôle et les scénarios d'application de eq dans jQuery

Comment savoir si un élément jQuery possède un attribut spécifique ? Comment savoir si un élément jQuery possède un attribut spécifique ? Feb 29, 2024 am 09:03 AM

Comment savoir si un élément jQuery possède un attribut spécifique ?

See all articles