Y a-t-il un événement JavaScript qui se déclenche lorsqu'un commutateur d'index de tabulation est déclenché? (TABINDEX ne fonctionne pas pour les entrées dans IFRAME)

Question

Mon cas d'utilisation spécifique est que j'ai un éditeur WYSIWYG qui est fondamentalement un iframe éditable. Pour l'utilisateur, cependant, il ressemble à une zone de texte standard. Mon problème est que j'ai des entrées qui se situent avant et après cet éditeur dans l'index de l'onglet (perçu) et je voudrais que l'utilisateur puisse appuyer sur tab (ou l'équivalent sur sa plate-forme de choix) pour accéder à l'éditeur WYSIWYG quand il est dans l'élément précédent et dans l'onglet shift pour y accéder quand il est dans le dernier élément.

Je sais que cela peut être truqué en utilisant les événements clés et en vérifiant si la touche de tabulation a été pressée ou non, mais je suis curieux de savoir s'il y a une meilleure façon de procéder.

---

MISE À JOUR. treeface a clarifié le problème réel dans les commentaires.

PROBLÈME:

En cas normal, vous pouvez utiliser l'attribut « TABINDEX » de l'élément <input> pour contrôler que, lorsque tabulateur sur le champ de saisie « Objet » (sous forme électronique), les terres de mise au point dans le champ de saisie "Corps" de l'e-mail. Cela se fait simplement en affectant des valeurs correctement ordonnées à l'attribut "TABINDEX" des deux champs de saisie.

Le problème est que l'attribut TABINDEX ne commande que des éléments dans la même trame. Donc, si le champ de saisie "Body" est réellement dans un IFRAME interne, vous ne pouvez pas sortir de "Subject" dans le cadre parent directement dans "Body" dans l'IFRAME en utilisant l'ordre TABINDEX.

Answer 1

Vous pouvez probablement émuler le comportement souhaité (probablement avec moins de problèmes que la détection de la touche TAB) par les événements onfocus/onblur des éléments d'entrée pertinents. De cette façon, vous n'aimez pas comment l'utilisateur est arrivé à l'entrée de l'éditeur, que ce soit via les tabulations ou en cliquant sur un AddOn FireFox bizarre qui vous permet de sauter à l'élément d'entrée par son ID/nom/# (je suis presque certains de ces add-on existe :)

---

MISE à JOUR. OP a clarifié le problème dans les commentaires.

PROBLÈME:

En cas normal, vous pouvez utiliser l'attribut « TABINDEX » de l'élément <input> pour contrôler que, lorsque tabulateur sur le champ de saisie « Objet » (sous forme électronique), les terres de mise au point dans le champ de saisie "Corps" de l'e-mail. Cela se fait simplement en affectant des valeurs correctement ordonnées à l'attribut "TABINDEX" des deux champs de saisie.

Le problème est que l'attribut TABINDEX ne commande que des éléments dans la même trame. Donc, si le champ de saisie "Body" est réellement dans un IFRAME interne, vous ne pouvez pas sortir de "Subject" dans le cadre parent directement dans "Body" dans l'IFRAME en utilisant l'ordre TABINDEX.

SOLUTION:

Dans le cadre parent, créer un nouvel élément <INPUT>. Il sera invisible (par exemple via CSS ou en faisant la taille 1x1), aura le nom/id de "Body_clone", et aura la valeur de l'attribut TABINDEX qui suit le TABINDEX du champ "Subject". Il aura également un gestionnaire onFocus qui trouvera simplement l'élément d'entrée "Body" à l'intérieur de l'IFRAME et appellera focus() sur cet élément.Vous pouvez faire de même avec tabulation/shift-tabbing hors de l'élément "Body" IFRAME en créant des éléments d'entrée "Subject_iframe_clone" et "After-body_iframe_clone" dans l'IFRAME qui fonctionnent exactement comme "Body_clone".