Comment passer d'un champ à l'autre avec les flèches?

28 août 2006, 17:39

Bonjour,
Je suis nouveau sur ce forum ainsi que dans le monde du PHP...

J'ai un petit souci dont je ne trouve pas la réponse sur le net, qui est le suivant:

Comment passer d'un champ à l'autre d'un formulaire avec les flèches du clavier? C'est à dire, comme avec la touche TAB...

Je suppose que l'on doit définir des input avec des tabindex, du style...

<input type="text" name="toto" tabindex="6" .............

Certainement un OnKeyPress dans le input....

Mais, plus loin que ça j'avouerais que j'ai du mal....

Merci par avance pour votre aide

Salutations

Jérôme

28 août 2006, 17:49

Ca se fait côté client, c'est donc du javascript et non du php

Il te faudrait effectivement utiliser l'attribut onKeyPress ou onKeyDown pour détecter qu'une touche est pressée dans le champ, puis récupérer l'évenement déclencheur qui te permet d'obtenir le code ascii de la touche enfoncée.
A partir de là, tu peux savoir s'il s'agit d'une flèche ou non, et si c'est le cas, de laquelle. Il ne te reste plus alors qu'à déterminer le champ suivant (via l'id par exemple) et lui donner le focus.

Voilà pour les grandes lignes..

Cela dit, par habitude, les gens qui utilisent les flèches le font pour se déplacer dans le champ, ça peut être assez troublant si cela te fait changer de champ...

30 août 2006, 17:32

Bonjour et merci Ryle pour ta réponse,

C'est bien ce que je pensais c'est donc du Javascript à intéger sur un onkeypress...
Pour les flèches c'est les flèches haut et bas donc pas de panique pour l'utilisateur
Tu vas peut-être pouvoir m'aider j'ai trouvé le code JAVA relatif au sujet
Mais je ne sais pas comment l'intégrer à mon INPUT lors du ONKEYPRESS

Code : Tout sélectionner

var fields = new Array(), focuson = -1

function writeField(type,tabIndex) {

var arg = writeField.arguments
fields[tabIndex] = document.createElement("INPUT")
fields[tabIndex].type = type
fields[tabIndex].tabIndex = tabIndex
fields[tabIndex].onclick = new Function("focuson = " + tabIndex)
for (i = 2;i < arg.length;i += 2) {
    fields[tabIndex][arg[i]] = arg[i + 1]
    }
document.body.appendChild(fields[tabIndex])
return fields[tabIndex]
}

function kPr() {
switch (event.keyCode) {
    case 38 :
    focuson--
    if (!fields[focuson]) {while (!fields[focuson]) {focuson --}}
    fields[focuson].focus()
    break
    case 40 :
    focuson++
    if (!fields[focuson]) {while (!fields[focuson]) {focuson ++}}
    fields[focuson].focus()
    break
    }
}

document.onkeypress = kPr

Grosso modo, je pense que les deux fonctions je les mets entre deux basiles <script> </script> en début de page

C'est le document.onkeypress = kPr que j'ai du mal à saisir

Je t'avouerais que la fonction WriteField, je ne la comprends pas vraiment et la KPr, je saisis le principe...

Encore merci pour ton(votre) aide

Jérôme

30 août 2006, 17:53

Le "document.onkeypress" a pour but de capturer l'événement d'appui sur une touche sur toute la page. Ce n'est à priori pas ce qui t'interesse ici, le but étant pour toi de ne récupérer l'événement que si l'utilisateur se trouve dans un de tes champs.

Il est donc à supprimer et à remplacer par des attributs onKeyPress="kPr(...);" dans chacun de tes champs pour faire appel à la fonction chaque fois que l'utilisateur appuye sur une touche et ainsi distinguer chacun des champs

La fonction writeField() n'a à priori pas d'intérêt pour toi. A première vue, elle sert à ajouter dynamiquement de nouveaux champs dans la page.

Le but est donc, sur tes champs de faire appel à ta fonction kPr (tu peux la renommer, ca sera plus explicite

) en passant une info pour savoir dans quel champ tu te trouves.
Récupérer le code de la touche enfoncée. S'il s'agit d'une flèche haut passer au champ suivant (à déterminer en fonction du champ dans lequel tu es), si c'est une flèche bas passer au précédent, et sinon ne rien faire

30 août 2006, 19:10

modération : le sujet aurait plus sa place dans le forum "Javascript"

sujet déplacé

31 août 2006, 10:31

(merci

)

Comment passer d'un champ à l'autre avec les flèches?

Qui est en ligne