Javascript Deplacer d'un champ a un autre...

Eléphant du PHP | 440 Messages

02 sept. 2008, 11:54

Bonjour à tous,

Je voudrait savoir si il est possible en javascript de se déplacer en fonction de la touche rentrée.

Je sais qu'on peut détecter quel touche du clavier mais je ne sais si il est possible de se déplacer d'un champ a un autre.

La situation:


Dans ma page web j'ai 4 champs a remplir, J'ai deja des exemples pour contrôler la touche taper dans un champs. Et je voudrait que par exemple lorsque j'appuie sur le touche "+" cela déplace le curseur sur le prochain champ (input). Est-ce réalisable?

Merci d'avance pour votre aide

guigui69

Mammouth du PHP | 1353 Messages

02 sept. 2008, 12:34

Bonjour,

La fonction focus() de javascript devrait t interesser ;)

Exemple :

Code : Tout sélectionner

<form name="formulaire"> <input id="champ1" name="champ1" type="text"/> <input id="champ2" name="champ2" type="text"/> <input id="champ3" name="champ3" type="text"/> <input type="button" onclick="document.getElementById('champ2').focus();" value="Focus !"/> </form>
Tell me and I forget. Teach me and I remember. Involve me and I learn.

ViPHP
AB
ViPHP | 5818 Messages

02 sept. 2008, 14:20

Bonjour à tous,

La situation:


Dans ma page web j'ai 4 champs a remplir, J'ai deja des exemples pour contrôler la touche taper dans un champs. Et je voudrait que par exemple lorsque j'appuie sur le touche "+" cela déplace le curseur sur le prochain champ (input). Est-ce réalisable?

Merci d'avance pour votre aide

guigui69
Ce fonctionnement est prévu avec la touche de tabulation.

Au chargement de ta page ou du formulaire, tu peux déjà mettre le focus dans le premier champ comme mentionné par guilt92. Ensuite il suffit d'utiliser "tabindex" dans les champs input pour donner l'ordre de positionnement du curseur quand on appuie sur la touche tabulation.

En reprenant son exemple, pour mettre le focus dans le champ 1 au chargement de la page et ensuite positionner le curseur sur les champs suivant lorsque l'on appuie sur la touche tabulation :

Code : Tout sélectionner

<body onload="document.getElementById('champ1').focus();"> <div> <form name="formulaire"> <input id="champ1" tabindex="0" name="champ1" type="text"/> <input id="champ2" tabindex="1" name="champ2" type="text"/> <input id="champ3" tabindex="2" name="champ3" type="text"/> ... </form> </div>

Eléphant du PHP | 440 Messages

02 sept. 2008, 14:28

Merci pour ta réponse,

Est-il possible de savoir en javascript dans quel element est le focus.

En fait quand dans notre champ input on tape la touche + je voudrait passer dans l'input suivant.

Code : Tout sélectionner

<table id="visu"> <label for="produit1">Produit : </label> <input type="text" name="code_rupture_stock" id="code_rupture_stock" value="" onkeyPress="quelle_touche(event);"> <label for="quantite">Date de rupture : </label> <input type="text" id="date_rupture_stock" name="date_rupture_stock" value="<?php $date = date("d/m/Y"); echo $date;?>" size="10" maxlength="10" onkeyPress="quelle_touche(event);"/> <label for="quantite">Date de réappro: </label> <input type="text" id="reappro_rupture_stock" name="reappro_rupture_stock" value="" size="10" maxlength="10" onkeyPress="quelle_touche(event);"/> <label for="quantite">Quantité : </label> <input type="text" id="qte_rupture_stock" name="qte_rupture_stock" value="" size="3" onkeyPress="quelle_touche(event);"/> <input type="button" id="ajouter" name="ajouter" value="Ajouter" onclick="RUPTURE.ajouter();" /></p> </table>
En fait la personne rentre dans la première case le numéro d'un produit, et des qu'il tape "+" cela passe au focus suivant qui porte le nom "date_rupture_stock" etc..

Comment je pourrait réaliser ceci.

Merci

guigui69

ViPHP
AB
ViPHP | 5818 Messages

02 sept. 2008, 14:45

Ah bah, je viens de te dire qu'on utilise pas la touche + mais la touche de tabulation pour passer au focus suivant (et je t'ai donné un exemple). C'est normalisé et prévu pour ça alors je vois pas bien l'utilité de faire autrement ...

Eléphant du PHP | 440 Messages

02 sept. 2008, 15:34

oops pardon je nai pas vu ton message. Je n'avais pas fait de refresh desolé. je lit ce que tu ma indiqué.

merci

guigui69