Page 1 sur 1
Javascript Deplacer d'un champ a un autre...
Posté : 02 sept. 2008, 11:54
par guigui69
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
Posté : 02 sept. 2008, 12:34
par guilt92
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>
Re: Javascript Deplacer d'un champ a un autre...
Posté : 02 sept. 2008, 14:20
par AB
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>
Posté : 02 sept. 2008, 14:28
par guigui69
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
Posté : 02 sept. 2008, 14:45
par AB
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 ...
Posté : 02 sept. 2008, 15:34
par guigui69
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