JS - "popup" de saisie

Commenter

Contenu du snippet

Salut à tous !

Alors c'est un tout petit code auquel à adapter en fonction du besoin. Pour remettre dans le context:

Je devais développer une application web utilisable uniquement via le clavier pour remplir des formulaires de manière ultra assisté (etape par etape).
Pour ca on a décidé de passer par des popup afin de remplir des champ "par groupe" en fonction de paramètres, par exemple si on doit renseigner les dimensions d'un produit, obligation de remplir les champs hauteur largeur et longueur (donc popup de 3 champs).

Le javascript ne proposant que 3 fonction d'interactivité (alert prompt et confirm) avec une mise en page unique, l'idée était donc de mettre en avant des champs à renseigner.

Au final ce n est pas une vraie popup, on ouvre pas de nouvelles fenêtres, mais seulement une div mise en avant. Voilà la classe : 


	
		function JSform (ObjectName , divTitle , mainDiv ){
			
			this.targetValidation = "";
			
			this.myID = "JSfrom";
			this.myName = ObjectName;
			this.cursorElem=0;
			this.elemTitle = divTitle;
			this.elements= new Array();
			this.motherDIVid = mainDiv;
			this.results = null;
			/**********************************************************/
			this.addInput = function  (sLib , sID){
				this.elements[this.cursorElem]=new Array();
				this.elements[this.cursorElem][0]=sID;
				this.elements[this.cursorElem][1] = (sLib == "" ? "" : sLib)+"<input type='text' onkeydown='"+(this.myName == "" ? "" : this.myName+".keyPressedHere()")+"' id='"+sID+"' />";
				this.cursorElem++;
			}
			/**********************************************************/
			this.addOpt = function (tOpt,sID){
				for(i = 0 ; i < tOpt.length ; i++ ){
					this.elements[this.cursorElem]=new Array();
					this.elements[this.cursorElem][0]=sID + "_" + i;
					if(tOpt[i].length > 1 ){
						this.elements[this.cursorElem][1] = "<label><input type='checkbox' id='"+sID+ "_" + i+"' value='"+tOpt[i][0]+"'  onkeydown='"+(this.myName == "" ? "" : this.myName+".keyPressedHere()")+"'>"+tOpt[i][1]+"</label>";
					} else {
						this.elements[this.cursorElem][1] = "<label><input type='checkbox' id='"+sID+ "_" + i+"' value='"+tOpt[i]+"' onkeydown='"+(this.myName == "" ? "" : this.myName+".keyPressedHere()")+"'>"+tOpt[i]+"</label>";
					}
					this.cursorElem++;		
				}	
			}
			/**********************************************************/
			this.start = function () {
				 var elCont = document.getElementById(this.myID);
				  if( elCont != null){
					elCont.parentNode.removeChild(elCont);
				  }
				elCont = document.createElement("div");
				elCont.id = this.myID;
				
				document.getElementById(this.motherDIVid).style.opacity=0.4;
				elCont.style.display = "block"; // ... on l'affiche...
				elCont.style.position="absolute";
				elCont.style.top="40%";
				elCont.style.right="40%";
				elCont.style.border="solid";
				elCont.style.zIndex ="99";
				
				var HTMLvalue = "";
				if(this.elemTitle != ""){
					HTMLvalue = "<h1>" + this.elemTitle + "</h1>";
				}
				for(i = 0 ; i < this.cursorElem ; i ++){
					HTMLvalue += this.elements[i][1];
				}
				elCont.innerHTML =HTMLvalue;
				document.body.insertBefore(elCont, document.body.childNodes[0]); 
				document.getElementById(this.elements[0][0]).focus();
			}
			/**********************************************************/
			this.doValidation = function() {
				this.results = new Array();
				for(i = 0 ; i < this.cursorElem ; i ++){
					this.results[this.elements[i][0]] = document.getElementById(this.elements[i][0]).value;
				}
				document.getElementById(this.motherDIVid).style.opacity=1;
				
				var elCont = document.getElementById(this.myID);
				elCont.parentNode.removeChild(elCont);				
				if(this.targetValidation != ""){
					this.targetValidation();
				}
			}
			/**********************************************************/
			this.keyPressedHere = function (e) {
				if(window.event.keyCode == 13) {
					for(i = 0 ; i < this.cursorElem ; i ++){
						if( document.activeElement.id == this.elements[i][0]){
							if( i == (this.cursorElem-1)){
								this.doValidation( );
							}
							else {
								document.getElementById(this.elements[i+1][0]).focus();
								break;
							}					
						}
					}
				}	
			}
			
		}



Pour ma part je n avais que des champs de saisie et check box donc je n ai pas été plus loin. De même la mise en page est pas terrible mais c est pas trop mon domaine ... (si certains sont motivés^^).

Vous remarquerez plusieurs choses:
- la fonction keyPressedHere : vu que dans mon scope je fais tout par clavier, je n ai pas de bouton de validation: la validation et la navigation entre les champs se fait via la touche enter (13)
- pour récupérer l evenement de validation et faire votre traitement, il faudra renseigner le "targetValidation"
- ObjectName est obligatoire: c'est le nom que vous donnerez à votre objet (je n ai pas trouvé comment le récupérer automatiquement)

Je reprécise que c'est vraiment spécifique à ce dont j avais besoin, et en fonction de comment est géré votre page il y aura surement de la modif à faire.

Si vous voulez tester: 

<html>
	<head>
		<script>
		..... CODE ...
		</script>
	</head>
	
	<body>
	
	
	
	<DIV ID="MAIN" style="position:relative;z-index:5;Width:80%;height:80%;background: none repeat scroll 0% 0% #000;">	
	</DIV>
	
	
		<script>	
		var ot  = new JSform("ot","titre","MAIN");
		ot.addInput("test1","EDT1");
		ot.addInput("test2","EDT2");
		ot.addInput("test3","EDT3");
		ot.start();
		ot.targetValidation = function () {
			alert("oK!");		
		}
		
</script>
	
	
	</body>
	
</html>

Compatibilité : 1

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (nagaD.scar)