[Javascript] Problème de champs, tabulations
Résolu
HostOfSeraphim
Messages postés
6750
Date d'inscription
Statut
Contributeur
Dernière intervention
-
baramogo99 -
baramogo99 -
Bonsoir,
Un petit problème que je n'ai pas réussi à résoudre cet après-midi.
Je cherche à faire en sorte que l'utilisateur ne soit pas obligé d'utiliser la tabulation ou sa souris pour remplir les 3 champs d'une date (jour, mois, année). J'ai donc prévu une fonction pour que le focus change dès que 2 caractères sont entrés dans le champ.
Seulement voilà, je souhaiterais également que dans le cas où l'utilisateur souhaite apporter une modification à ses valeurs (sans tout effacer), ce système soit capable de modifier certaines valeurs seulement, en les sélectionnant.
Voici ce que j'ai pour le moment :
Essayez de remplir les champs, et revenez dans le premier champ pour apporter des modifications : le focus "saute" le champ suivant et se place un champ trop loin.
Quelqu'un saurait-il m'indiquer ce que je fais de mal ? Je ne vois pas la logique qui fait que le focus aille trop loin dans ce cas.
Merci !
Un petit problème que je n'ai pas réussi à résoudre cet après-midi.
Je cherche à faire en sorte que l'utilisateur ne soit pas obligé d'utiliser la tabulation ou sa souris pour remplir les 3 champs d'une date (jour, mois, année). J'ai donc prévu une fonction pour que le focus change dès que 2 caractères sont entrés dans le champ.
Seulement voilà, je souhaiterais également que dans le cas où l'utilisateur souhaite apporter une modification à ses valeurs (sans tout effacer), ce système soit capable de modifier certaines valeurs seulement, en les sélectionnant.
Voici ce que j'ai pour le moment :
<html>
<head>
</head>
<body>
<script language="Javascript">
function ChampSuivant(actuel, suivant, limite)
{
if (actuel.value.length == limite)
{
suivant.focus();
}
}
</script>
<form name="form">
<input type="text" name="champ1" size=2 maxlength=2 onKeyUp="ChampSuivant(champ1,champ2,2)"> /
<input type="text" name="champ2" size=2 maxlength=2 onKeyUp="ChampSuivant(champ2,champ3,2)"> /
<input type="text" name="champ3" size=2 maxlength=2 onKeyUp="ChampSuivant(champ3,champ4,2)">
<br/>
<input type="text" name="champ4" size=2 maxlength=2 onKeyUp="ChampSuivant(champ4,champ5,2)"> /
<input type="text" name="champ5" size=2 maxlength=2 onKeyUp="ChampSuivant(champ5,champ6,2)"> /
<input type="text" name="champ6" size=2 maxlength=2>
</form>
</body>
</html>
Essayez de remplir les champs, et revenez dans le premier champ pour apporter des modifications : le focus "saute" le champ suivant et se place un champ trop loin.
Quelqu'un saurait-il m'indiquer ce que je fais de mal ? Je ne vois pas la logique qui fait que le focus aille trop loin dans ce cas.
Merci !
A voir également:
- [Javascript] Problème de champs, tabulations
- Tabulations word - Guide
- Telecharger javascript - Télécharger - Langages
- Le nom du champ de tableau croisé dynamique n'est pas valide ✓ - Forum Excel
- Word mettre à jour tous les champs ✓ - Forum Word
- Word : Mise à jour des champs - Forum Word
2 réponses
Solution trouvée :
Le problème se produisait lors d'une frappe rapide, suffisamment rapide pour que le onKeyUp réagisse trop tard. De cette manière, comme c'est le onKeyUp qui incrémente le compteur, le changement de focus ne peut se faire tant qu'il n'est pas "revenu".
<html>
<head>
</head>
<body>
<script language="Javascript">
var cpt = 0;
function ChampSuivant(actuel, suivant, limite)
{
cpt++;
if (cpt == limite)
{
suivant.select();
cpt = 0;
}
}
</script>
<form name="form">
<input type="text" name="champ1" size=2 maxlength=2 onKeyUp="ChampSuivant(champ1,champ2,2)"> /
<input type="text" name="champ2" size=2 maxlength=2 onKeyUp="ChampSuivant(champ2,champ3,2)"> /
<input type="text" name="champ3" size=2 maxlength=2 onKeyUp="ChampSuivant(champ3,champ4,2)">
<br/>
<input type="text" name="champ4" size=2 maxlength=2 onKeyUp="ChampSuivant(champ4,champ5,2)"> /
<input type="text" name="champ5" size=2 maxlength=2 onKeyUp="ChampSuivant(champ5,champ6,2)"> /
<input type="text" name="champ6" size=2 maxlength=2>
</form>
</body>
</html>
Le problème se produisait lors d'une frappe rapide, suffisamment rapide pour que le onKeyUp réagisse trop tard. De cette manière, comme c'est le onKeyUp qui incrémente le compteur, le changement de focus ne peut se faire tant qu'il n'est pas "revenu".
En améliorer:
avec un appel de cette fonction du type : onkeypress="sauterchamp(this);" dans un input.
function sauterchamp(element){
if(element.value.length>=element.maxLength){
numchampsuivant=Number(element.name.substr(element.name.length-1));
nomchampsuivant=element.name.substr(0,element.name.length-1);
numchampsuivant++;
nomchampsuivant+=numchampsuivant;
eval("document.ficheparticipant."+nomchampsuivant+".focus()");
}
}
A NOTER QU'IL FAUT QUE LES NOMS DES INPUT AIENT UN TRONC COMMUN ET UN CHIFFRE QUI SE SUIT.
EXEMPLE: champ1 | champ2 | champ 3 etc...
CODE VALABLE JUSQU'A 10 CHAMPS. SINON A MODIFIER.
avec un appel de cette fonction du type : onkeypress="sauterchamp(this);" dans un input.
function sauterchamp(element){
if(element.value.length>=element.maxLength){
numchampsuivant=Number(element.name.substr(element.name.length-1));
nomchampsuivant=element.name.substr(0,element.name.length-1);
numchampsuivant++;
nomchampsuivant+=numchampsuivant;
eval("document.ficheparticipant."+nomchampsuivant+".focus()");
}
}
A NOTER QU'IL FAUT QUE LES NOMS DES INPUT AIENT UN TRONC COMMUN ET UN CHIFFRE QUI SE SUIT.
EXEMPLE: champ1 | champ2 | champ 3 etc...
CODE VALABLE JUSQU'A 10 CHAMPS. SINON A MODIFIER.