Créer des zones réactives dans un login

17 févr. 2010, 15:29

Bonjour,

J'ai depuis quelques temps réalisé une fenêtre de login que j'aimerai "embellir" par du texte (voir exemple ci-dessous).

Ce que j'aimerai pouvoir réaliser c'est un texte de bienvenue à droite des input qui disparait quand un clique sur un des input pour faire place à la description de l'input lui-même.

Donc quand je charge ma page login pour la première fois, j'ai le texte: "Bienvenue dans le manager, blablabla ..."
Lorsque je clique sur l'input de l'identifiant, j'ai le texte : "veuillez saisir votre identifiant ..."
Lorsque je clique sur l'input du mot de passe, j'ai le texte : "veuillez saisir votre mot de passe ..."
etc ...

Le truc c'est que je n'ai jamais fait de javascript "pour ainsi dire" et je ne sais pas comment je dois commencer et agencer tout ça.
Je ne sais pas non plus comment faire apparaître et disparaitre du texte et le placer au bon endroit ...

Pouvez-vous m'aider ? J'aimerai pouvoir réaliser la fonction javascript moi même, mais j'ai besoins d'explications et d'exemple pour comprendre et bien débuter...

Merci,
raph

17 févr. 2010, 16:36

J'aimerai pouvoir réaliser la fonction javascript moi même, mais j'ai besoins d'explications

Merveilleux !.. ça existe encore alors ^^

Donc, je vais te décrire une base de principe de fonctionnement :

- ton texte est affiché dans une <div> (ou autre) qui a en attribut un id, que tu connais (ex : id="maZone")

lors du chargement de la page (voir les event onLoad),
- tu initialise une variable var container en lui attribuant la cellule en charge de contenir ton texte. (voir getElementById)
- tu initialise une autre variable (var defaultText par exemple) avec le contenu de la div par deffaut ("bienvenu .... ")

Ensuite tu place des écouteurs sur tes input (event onfocus et onblur) et te débrouille pour lancer une fonction correspondante avec l'évent approprié.

Ces fonctions auront pour objet de remplacer le contenu (innerHTML) de notre cellule par un autre (soit celui par deffaut, soit un que tu sais retrouvé et correspondant avec ton input)
Pour trouver le texte correspondant à l'input, tu as divers solutions un attribut de l'input (title par exemple), ou une span (par exemple) dont l'id serait le meme que celui de l'input+'_UneChaine';
exemple :
<input id="login" />
<span style="display:none" id="login_TextPourLeDescription">Blablabal</span>

Voila pour le fonctionnement, 2 variables, 2 fonctions, 3 events, et des éléments HTML

@+

18 févr. 2010, 17:01

Merci Nours312
Je vais m'y mettre ... mais je reviendrai certainement vers vous à un moment ou à un autre

Raph

19 févr. 2010, 01:12

Alors ça avance ?

Bon je te montre une méthode qui utilise uniquement le DOM, c'est à dire qui n'utilise pas innerHtml, ce qui complique un peu la chose mais c'est plus didactique en même temps que conforme aux recommandation du W3C.

Les principales parties du code sont commentées.
A noter que j'enregistre ton message de présentation initial ce qui permet de le restituer si on clique en dehors des input qui doivent envoyer les messages.

Etudies les différentes fonctions employées et quand tu auras tout compris, tu auras déjà pas mal avancé

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">

function message(id_input,id_message)
{
	var id_mes;
	var message = null;
	this.message_origine = typeof this.message_origine != 'undefined' ? this.message_origine : new Array;


	// Je cherche l'élément cible (dans cet exemple : 'accueil') et s'il existe j'exécute le code
	if (id_mes = document.getElementById(id_message))
		{
			
			// J'enregistre l'élément cible originel lors du premier clic dans le tableau this.message_origine
			if(this.message_origine.length == 0)
				{
					for (var i = 0; i < id_mes.childNodes.length; i++) 	   
						{	
							this.message_origine[i] = id_mes.childNodes[i];
						}
				}


			// Je nettoie l'élément cible en effaçant tous ses noeuds (contenus)	
			var noeuds = id_mes.childNodes.length;
	   		for (var i = 0; i < noeuds; i++) 	   
		   		{				   
					id_mes.removeChild(id_mes.firstChild);
		   		}


			// Je prépare le message suivant la valeur de l'id "appelant"
			switch (id_input)
				{
					case 'ident' : message = 'Merci de rentrer votre identifiant';break;
					case 'mdp' : message = 'Merci de rentrer votre mot de passe';break;	
					
					default : message = null; 
				}


			// Je crée un noeud de texte en fonction du message
			var texte = document.createTextNode(message);


			// j'insère le noeud de texte dans l'élément cible si le clic provient d'un input envoyant un message sinon je restaure le message d'origine
			if (message != null) 
					{
						id_mes.appendChild(texte);
					}
					else
					{
						for (var i = 0; i < this.message_origine.length ; i++)
							{
								id_mes.appendChild(this.message_origine[i]);
							}
						
					}
			
		}
}

</script>
</head>
<body>

<div>

    <p id = "accueil" >
        Texte de <strong>présentation</strong> <em>initial</em>
    </p>
    
    <p>
        <input type = "text" value = "identifiant" id = "ident" name = "identifiant" onfocus = "message(this.id,'accueil')" onblur = "message('','accueil')" />
        <input type = "text" value = "mot_de_passe" id = "mdp" name = "mot_de_passe" onfocus = "message(this.id,'accueil')" onblur = "message('','accueil')" />    
    </p> 
       
     Autre texte ailleurs dans la page
     
 </div>

</body>
</html>

19 févr. 2010, 16:18

Merci AB,
Je regarde tout ça. Mais ce ne sera pas pour tout de suite car j'ai autre chose sur le feu de plus urgent :
javascript-ajax/afficher-cacher-une-div ... 51772.html

Si tu pouvais m'aider pour ce nouveau problème ... je ne saurais que t'en remercier !

Raph

Créer des zones réactives dans un login

Qui est en ligne