Tabulation et Ajax

Bonjour,

Je développe une appli web (dans le transport). Les cilents l'utilisent avec Google Chrome.
Au début, la saisie des transports se faisait entièrement au clavier: tabulation, saisie, tabulation, etc, validation du formulaire.

Mais depuis, beaucoup de choses à saisir se sont ajoutées, et notamment, des fenêtres en Ajax (par exemple, la liste des clients, ou l'historique des transports déjà saisis). Et là, je ne suis plus parvenu à maintenir mes tabulations.

Ex. je tape la liste des clients dans un INPUT text, et à partir de la troisième lettre, un div, situé après dans le HTML, propose une liste. Il faudrait pouvoir ENTRER dans le div avec tabulation et parcourir la liste (avec tab ou flèche bas), puis, une fois une cligne choisie (par "entrée" par exemple), le curseur se positionne dans le INPUT suivant.

Comment faire svp ? Quel est le principe à suivre dans ce cas ?

a écrit :
Ex. je tape la liste des clients dans un INPUT text, et à partir de la troisième lettre, un div, situé après dans le HTML, propose une liste. Il faudrait pouvoir ENTRER dans le div avec tabulation et parcourir la liste (avec tab ou flèche bas), puis, une fois une cligne choisie (par "entrée" par exemple), le curseur se positionne dans le INPUT suivant.

Dans le domaine de l'accessibilité, voilà un bon principe de base: va toujours au plus simple et utilise au maximum ce qui est nativement supporté par l'OS/le navigateur. Tout ce que tu devras programmer comme substitut à du comportement de base sera forcément moins accessible que le composant natif (les dingues qui se croient surpuissants avec ARIA, s'il vous plaît, gardez aussi ça en tête, ça vous concerne encore plus)

Pour le cas précis que tu exposes, regarde du côté de <datalist>; sur les navigateurs raisonnablement récents, ça fait exactement ce que tu veux. Pour les navigateurs un peu plus anciens (<=IE9), applique le principe: ça devrait te renvoyer tout droit vers <select>,.

Bonjour.

Si j'ai bien tout compris, je dirais que tabindex est ton ami

Merci à vous.
Je me bats déjà avec le bon vieux tabindex. Je crois que je vais creuser vers datalist. Quel en est le principe ? C'est un attribut pour balises html ?

Bonjour,

En fait <datalist> est bien pour une simple liste d'options, mais mes div remontaient en Ajax des tableaux avec des input. J'ai donc tout repris, avec des bons vieux tabindex, mais en générant dynamiquement les numéros (en gardant par exemple un assez grand écart de tabindex lorsque mon div ressortait beaucoup de résultats)
J'ai complété avec du jQuery pour qu'une fois un enregistrement sélectionné, on passe ("de force") au champ suivant avec focus()
Enfin, quelques "onblur" bien distillés ont fini par faire l'affaire.

Problème résolu. merci à vous.

Mon avis sur tabindex c'est que n'importe quelle valeur différente de 0 ou -1 est mauvaise et à éviter comme la peste.

Si tu veux utiliser une seule valeur de tabindex supérieure à 0, alors tu dois attribuer un tabindex à ***tous*** les éléments focusables de la page; même les liens et les champs de formulaire qui marchaient très bien sans. Dans le 99.9% des cas c'est inutile, compliqué, et ça fout la merde; mieux vaut laisser le système gérer le focus le plus possible et utiliser les composants natifs de base le plus possible pour éviter de devoir bidouiller soi-même.

Tout ça se gère affectivement assez bien nativement. Le souci est que dans ces formulaires, il y a parfois des liens (balise <A> qui déclenche l'affichage d'un div dans lequel on choisit un item).
Or les navigateurs, par défaut, ne parcourent pas tous ces éléments dans l'ordre du code HTML. J'ai l'impression qu'ils parcourent d'abord les éléments de formulaire, puis les éléments html (ou l'inverse).

a écrit :
Tout ça se gère affectivement assez bien nativement. Le souci est que dans ces formulaires, il y a parfois des liens (balise <A> qui déclenche l'affichage d'un div dans lequel on choisit un item).

Ca, ça me paraît typiquement être une liste de choix, une liste déroulante. Pourquoi tu n'utiliserais pas tout simplement <select> ou bien <datalist> ? Ca t'éviterais bien des tracas je pense.

En ce qui concerne l'ordre, c'est probablement parce que les div qui sont ajoutés dynamiquement le sont tout à la find de la page, au lieu de lêtre au véritable bon endroit. Si tu crées des div à la find de la page et que tu ne fais rien, elles seront forcément atteintes en dernier; dans ce cas il faut placer le focus sur le premier élément du menu / popup.

Bonjour,

Je vais clore ce sujet en remarquant que ce n'est pas si simple lorsqu'on a des <option></option> générés dynamiquement via Ajax ou des div autocomplete (genre "google suggest"). Je jongle donc avec des tabindex=100 et tabindex=200 pour qu'entre les deux, mes tabindex=101, 102, etc soient générés. Et je jongle aussi avec jQuery: lorsqu'un champ est sélectionné, dans mon div "autocomplete" je fais un

$(#champsuivant).focus();

Merci pour vos contributions !

Évite vraiment les tabindex=X avec X!=0 et X!=-1, ça fout vraiment le bordel et de manière très incidieuse. Gérer le focus et le clavier correctement n'est pas facile, mais tabindex>0 c'est vraiment une grosse connerie, une erreur de jeunesse du HTML