11488 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Passer le focus au suivant

Bonjour à tous
J'ai une <form> qui contient plusieurs <input>
Avec le clavier, quand j'appuie sur Tab le focus passe au <input> suivant.

Pour faire la même chose par programme, j'ai dû développer pas mal de code pour
1) créer la table des <input>
2) aller chercher par programme l'entrée suivante dans la table
3) faire un .focus() sur cet élément.

J'ai du mal à croire qu'il n'existe pas de méthode plus simple pour réaliser la même chose !

J'ai essayé en vain :

const tabEvent = new KeyboardEvent('keydown', {key: 'Tab'});
currentNode.dispatchEvent(tabEvent);
Salut

Bien sur qu'il existe plus simple!
Il faut juste ordonner les tabindex

Exemple simple : 

<input type="text" tabindex="1">Un text</input >
<input type="text" tabindex="2">Un autre text</input >
<input type="text" tabindex="3">Et un 3eme text</input >


Si tu as le même tabindex avec la même valeur alors la positions dans le dom sera déterminante
Modifié par JENCAL (02 Apr 2024 - 10:42)
Merci de ta réponse
Ce que tu proposes (et que j'ai fait) ne répond pas au problème.
On passe de tabindex=n à tabindex=n+1 en entrant "tab" au clavier.
Ce que je veux c'est passer au suivant par programme et sans faire tab.
J'ai essayer de simuler l'entrée du tab par 

const tabEvent = new KeyboardEvent('keydown', {key: 'Tab'});
currentNode.dispatchEvent(tabEvent);

mais ça n'a rien donné, d'où ma question.
Ah effectivement, j'avais mal compris le "par programme"
Modifié par JENCAL (02 Apr 2024 - 14:30)
Administrateur
Bonjour,

j' en rêverais pour tester l'accessibilité au clavier mais pour des raisons de sécu, c'est impossible : un script malveillant aurait une bien trop grande liberté... Smiley sick (seul un programme externe au navigateur peut faire ça...)

Entre autres solutions, celle de Kitty Giraudel prend en compte un grand nombre de cas de façon assez élégante :
* ces sélecteurs-là : https://github.com/KittyGiraudel/focusable-selectors/blob/main/index.js
* utilisés dans ces fonctions utilitaires : https://github.com/KittyGiraudel/a11y-dialog/blob/main/src/dom-utils.ts
* voir aussi le README du 1er lien qui fait référence à focus-trap/tabbable
Salut,

Y'aurait pas moyen de faire un `.querySelectorAll()` sur tous les inputs cibles, puis 'd'appliquer un `.focus()` successif sur chacun des items du tableau ainsi obtenu, séparés par une temporisation ? C'est une idée qui marcherait à mon avis.

Edit : je viens de voir le post de Felipe, considérez que je n'ai rien dit...
Modifié par Olivier C (02 Apr 2024 - 15:48)
Modérateur
Bonjour,
PapyJP a écrit :
J'ai essayer de simuler l'entrée du tab par 

const tabEvent = new KeyboardEvent('keydown', {key: 'Tab'});
currentNode.dispatchEvent(tabEvent);

mais ça n'a rien donné, d'où ma question.

Lorsqu'un événement est généré via js, il a une propriété qui s'appelle isTrusted qui vaut false, et si l'on veut qu'une action soit exécutée lorsque cet évènement est "dispatché", il faut la programmer et l'ajouter à un élément via un element.addEventListener(). Sinon, même si l'évènement est effectivement "dispatché", rien ne se produira.

Si l'évènement est généré via une action de l'utilisateur, la propriété isTrusted de l'évènement vaut true, et des actions "par défaut" peuvent être exécutées par le navigateur, comme par exemple un changement d'élément ayant le focus quand on presse la touche "Tab".

Voir https://developer.mozilla.org/fr/docs/Web/API/Event/isTrusted

La propriété isTrusted est en lecture seule évidemment.

Tout ça a comme conséquence qu'on ne peut pas en théorie changer le focus d'un élément en se contentant de "dispatcher" un évènement 'keydown' ayant key="Tab".

En pratique, il est possible que certains y arrivent quand même, mais via un coup de bol exploitant un bug des navigateurs, et sans aucune assurance que ce soit pérenne.

Il faut donc faire la liste des éléments pouvant prendre le focus (plus ou moins complexe selon le contenu de la page), déterminer celui qui a le focus dans cette liste, et donner le focus au suivant. C'est ce que tu fais déjà si j'ai bien compris et tu ne peux pas y échapper.

Amicalement,
Modifié par parsimonhi (02 Apr 2024 - 17:20)
Prévenir un modérateur
Répondre au sujet
Aller à