Focus sur champ créé via innerHTML

rudak Messages postés 590 Date d'inscription   Statut Membre Dernière intervention   -  
rudak Messages postés 590 Date d'inscription   Statut Membre Dernière intervention   - 26 juil. 2010 à 20:21
Bonjour,
je suis en train de faire un formulaire tout simple avec 2 champs input
pseudo et mot de e

par défaut on a un texte dans chaque champs ("votre pseudo" et "mot de se")

j'ai mis un onClick=verif(this) sur chaque champs pour enlever ce texte par défaut

pour le champ pseudo ca va nikel mais sur le champ c'est plus compliqué en ce qui concerne le type de champs ( / text)

donc j'ai utilisé une petite feinte qui conciste a remplacer carément l'input via innerHTML et qui remplacera l'input type=text par un input type=

le soucis c'est que je n'arrive pas a avoir un focus sur mon nouveau champ fraichement créé et je ne voi pas d'ou ca peut venir...

voila mon code html :

<form action="?action=loggin" method="post" enctype="multipart/form-data" name="loggin" target="_self"> 
<input id="bouton_loggin" type="image" src="../imgs/icones_boutons/bout_ok_glossy.png"> 
<input id="pseudo_log" name="pseudo_log" value="Votre pseudo" onClick="verif(this)"><br> 
<div id="div_bouton_"> 
 <input id="e_log" value="Mot de e" onClick="verif(this)"> 
</div> 
</form> 


voila mon javascript :
function verif(valeur) 
{ 
 if(valeur.value == "Votre pseudo") 
 { 
  document.getElementById('pseudo_log').value = ""; 
 } 
 if(valeur.value == "Mot de e") 
 { 
if(valeur.id == "e_log")
		{
			nouveau_champ = "<input id='e_log' name='e_log'  type='' value=''>";
			document.getElementById("div_bouton_").innerHTML = nouveau_champ;
			document.getElementById('e_log').focus();
		} 
   
 } 
}
A voir également:

3 réponses

rudak Messages postés 590 Date d'inscription   Statut Membre Dernière intervention   46
 
nan mais ca marche pas sous IE donc ca va pas j'ai déja essayé.
(sinon j'aurais pas fait tout un cinéma avec le innerHTML) =)
0
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
Tiens une solution en beaucoup plus simple:

<script type="text/javascript">
function verif(id,val_defaut) 
{
	var valeur= document.getElementById(id).value;
	 if(valeur == val_defaut) 
	 { 
	  document.getElementById(id).value = ""; 
	 }  
}
</script>

<form action="?action=loggin" method="post"name="loggin" target="_self"> 	
	<input id="pseudo_log" name="pseudo_log" value="Votre pseudo" onFocus="verif('pseudo_log','Votre pseudo')" /><br /> 
	<input id="e_log" name="e_log" value="Mot de e" onFocus="verif('e_log','Mot de e')" /> <br /><br />
	<input id="bouton_loggin" type="image" src="../imgs/icones_boutons/bout_ok_glossy.png" /> 
</form>
-1
rudak Messages postés 590 Date d'inscription   Statut Membre Dernière intervention   46
 
désolé mais si ta solution est beaucoup plus simple en effet elle ne règle pas le soucis du type d'input (text ou )
0
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
n'oublies pas le type="..." dans tes input

essayes comme ça:
chez moi sur Firefox ça marche

<script type="text/javascript">
function verif(id,val_defaut) 
{
	var valeur= document.getElementById(id).value;
	 if(valeur == val_defaut) 
	 { 
	  document.getElementById(id).value = ""; 
	  if(val_defaut=='Mot de e'){
		document.getElementById(id).type='';
	  }
	 }  
}
</script>

<form action="?action=loggin" method="post" name="loggin" target="_self"> 	
	<input type="text" id="pseudo_log" name="pseudo_log" value="Votre pseudo" onFocus="verif('pseudo_log','Votre pseudo')" /><br /> 
	<input type="text" id="e_log" name="e_log" value="Mot de e" onFocus="verif('e_log','Mot de e')" /> <br /><br />
	<input type="image" id="bouton_loggin" name="bouton_" src="../imgs/icones_boutons/bout_ok_glossy.png" /> 
</form> 
-1