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>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é :wink:
[code]<!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>[/code]
