Prob de formulaire

**baleiney** · 24/02/2007, 16h05

Bonjour, j'ai un formulaire où j'affiche les infos requises dans le champ directement (exemple, je demande le nom, je fais un champ nom et lorsque l'utilisateur clique sur le champ pour le remplir, une commande javascript enlève 'nom' pour que l'utilisateur écrive son nom à lui).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<input name="SURNAME" type="text" onFocus="if(this.value=='Nom')
this.value='';" onBlur="if(this.value=='')this.value='Nom';">

Tout marche correctement mais j'ai un problème pour le champ password, parce que je l'ai mis en type password mais comme j'écris l'info demandée dans le champ au lieu d'avoir 'Mot de passe' j'ai '**********' et je ne suis pas sûr que l'utilisateur sache qu'on lui demande d'indiquer son pass.
Il n'y aurait pas un moyen de changer le type du champ (mettre type=text quand value='Mot de passe' et mettre type=password quand l'utilisateur tape qqch?
Merci par avance

**ryan** · 25/02/2007, 00h58

Yop!

J'ai bien peur qu'une fois que le champ a été créé, la propriété type ne puisse plus être changée.

Pas testé:
- Afficher un champ de type texte
- Dès que ce champ reçoit le focus, l'effacer
- Créer à sa place un champ de type password
- Donner le focus à ce champ nouvellement créé

**ryan** · 25/02/2007, 01h32

Yop!

Insomnie quand tu nous tiens...

Voici donc un bout de code qui remplace un champ text par un champ password quand le champ texte reçoit le focus.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<html>
<head>
<script language="javascript">
 
function replaceMe() 
{
  var oldfield = document.getElementById("version1");
  var theparent = oldfield.parentNode;
  var newfield = document.createElement("input");
  newfield.setAttribute("type","password");
  newfield.setAttribute("name","version2");
  theparent.replaceChild(newfield,oldfield);
}
</script>
</head>
<body>
<form name="monform">
<input type=text name="nom" value="Votre nom">
<br>
<input type=text name="version1" value="Votre mot de passe" onfocus="replaceMe()">
</form>
</body>
</html>

Par contre, je n'arrive pas à donner le focus au champ qui vient d'être créé.
Ca fait 20 minutes que je butte sur ce détail, ce doit pourtant être tout con...

**Anne1969** · 25/02/2007, 10h34

Ouahou...je n'ai rien à voir avec la choucroute mais BRAVO

**ryan** · 25/02/2007, 20h54

Yop!

J'ai résolu le pb du focus, mais c'est un peu tiré par les cheveux:

- Il faut introduire un timeout, sinon ça ne fonctionne pas (en tout cas, je n'arrive pas à le faire fonctionner)

- J'ai essayé de faire référence au champ nouvellement créé soit par le nom qui lui est attribué, soit par la variable qui contient l'object, mais je n'arrive pas à donner le focus. La seule façon que j'ai trouvé est de passer par la collection "elements" du form.

- C'est tout un jeu pour retrouver quel est le rang du champ concerné parmi la collection "elements" du form. Si quelqu'un connaît un moyen plus élégant que d'itérer à travers toute la collection "elements" en comparant les noms, je suis preneur.

En bref, la fonction replaceMe prend deux paramètres: le nom du champ à remplacer (this.name) et le nom à donner au champ replaçant (password)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<html>
<head>
<script language="javascript">
 
function replaceMe(thefield,newname) 
{
 
  var oldfield = document.getElementById(thefield);
  var theparent = oldfield.parentNode;
  for (i=0; i<theparent.elements.length; i++)
  {
    if (theparent.elements[i].name == thefield) theindex = i;  
  } 
  var newfield = document.createElement("input");
  newfield.setAttribute("type","password");
  newfield.setAttribute("name",newname);
  theparent.replaceChild(newfield,oldfield);
  window.setTimeout("document.forms.monform.elements[theindex].focus()",1);
}
</script>
</head>
<body>
<form name="monform">
<input type=text name="nom" value="Votre nom">
<br>
<input type=text name="version1" value="Votre mot de passe" onfocus="replaceMe(this.name,'password')">
</form>
</body>
</html>

**ryan** · 25/02/2007, 23h58

Yop!

Je n'aimais décidément pas cette façon de retrouver l'index de l'élément qui doit recevoir le focus, donc voici une alternative et un code plus compact:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<html>
<head>
<script language="javascript">
 
function replaceMe(thefield,newname) 
{
 
  var oldfield = document.getElementById(thefield);
  theindex = oldfield.sourceIndex;
  var theparent = oldfield.parentNode;
  var newfield = document.createElement("input");
  newfield.setAttribute("type","password");
  newfield.setAttribute("name",newname);
  theparent.replaceChild(newfield,oldfield);
  window.setTimeout("document.all(theindex).focus()",1);
}
</script>
</head>
<body>
<form name="monform">
<input type=text name="nom" value="Votre nom">
<br>
<input type=text name="version1" value="Votre mot de passe" onfocus="replaceMe(this.name,'password')">
</form>
</body>
</html>

Prob de formulaire

JavaScript

Discussions similaires

Partager

Partager