Manière la plus simple de mettre en tabulation uniquement par le biais des descendants focalisables d'un élément particulier?

Disons que j'ai un document plein de focusable éléments, soit parce qu'ils sont naturellement peut recevoir le focus (comme <input type="text">) ou parce qu'ils ont tabindex="0" ou similaires.

Maintenant, disons qu'il y a une section de mon document que je veux afficher une boîte de dialogue modale, et je ne veux pas que l'utilisateur d'être distrait par quoi que ce soit à l'extérieur de la boîte de dialogue. Je voudrais, pour la touche de tabulation pour cycle uniquement par le biais de focusable éléments à l'intérieur de l'élément conteneur de la boîte de dialogue. Quelle est la façon la plus simple de faire cela?

Si possible, je suis à la recherche d'une solution qui ne se soucie pas de ce que le contenu de la boîte de dialogue ou dans le reste de la page ne sont et ne pas essayer de les modifier. C'est, je ne veux pas faire les éléments à l'extérieur de la boîte de dialogue ne peut recevoir le focus, par exemple. Tout d'abord, cela nécessite de faire un changement réversible et garder une trace de l'état. Deuxièmement, cela nécessite de connaître toutes les manières possibles d'un élément peut être fait peut recevoir le focus. Cela se sent sale, fragile, et infranchissables pour moi.

Ma première tentative ressemble à ça, mais ne fonctionne que dans le sens de la marche (en appuyant sur la touche Tab). Il ne fonctionne pas dans le sens inverse (en appuyant sur Maj+Tab).

<div>Focusable stuff outside the dialog.</div>
<div class="dialog" tabindex="0">
  <!-- Focus should be trapped inside this dialog while it's open -->
  <div class="content">
    Form contents and focusable stuff here.
  </div>
  <div class="last-focus" tabindex="0" onfocus="this.parentNode.focus()"></div>
</div>
<div>More focusable stuff outside the dialog.</div>

Je préfère le voir pur JavaScript solutions. Si il y a un moyen de le faire avec une librairie comme jQuery, je préfère un lien vers le code de la bibliothèque qui fait cela.

source d'informationauteur Chris Calo

  1. 12

    Dans l'intérêt de l'exhaustivité, je prends le lien de jQuery UI dialog que @Dominique fourni et rempli les détails.

    Mise en œuvre dans l'jQuery mode nécessite deux choses:

    1. Écoute pour Tab ou Shift+Tab (sur keydown) pour le modal élément qui devrait piège de se concentrer. C'est le seul moyen de déplacer le focus à l'aide du clavier. (Si vous souhaitez empêcher l'interaction de la souris avec le reste du document, qui est un autre problème résolu par le couvrant avec un élément pour empêcher toute les événements de la souris.)

    2. Trouver tous les tabbable éléments à l'intérieur de l'élément modal. Ces sont un sous-ensemble de tous les focusable éléments, à l'exclusion de ceux qui ont tabindex="-1".

    Tab va de l'avant. Shift+Tab va vers l'arrière. Tout moment Tab est enfoncée alors que le dernier tabbable élément dans l'élément modal est concentré, le premier devrait recevoir le focus. De même, tout le temps Shift+Tab est enfoncée alors que le premier tabbable élément est concentré, le dernier devrait recevoir le focus. Cela permettra de garder le focus à l'intérieur de l'élément modal.

    La partie la plus difficile est de savoir quels sont les éléments tabbable. Depuis tabbable les éléments sont tous focusable éléments qui n'ont pas tabindex="-1"alors nous avons besoin de savoir de savoir quels éléments sont peut recevoir le focus. Car il n'y a pas de propriété pour déterminer si un élément peut recevoir le focus, jQuery t-il par coder en dur les cas suivants:

    • inputselecttextareabuttonet object des éléments qui ne sont pas désactivés.
    • a et area éléments qui ont une href ou ont une valeur numérique pour tabindex ensemble.
    • tout élément qui a une valeur numérique pour tabindex ensemble.

    Il ne suffit pas de vérifier pour ces trois cas. jQuery va, pour s'assurer que l'élément est visible. Cela signifie que les deux conditions suivantes doivent être remplies:

    • Aucun de ses ancêtres sont display: none.
    • La valeur calculée de visibility est visible. Cela signifie que l'ancêtre le plus proche pour avoir visibility ensemble doit avoir une valeur de visible. Si aucun ancêtre n'a visibility défini, la valeur calculée est visible.

    Il convient de noter que jQuery :visible sélecteur n'a pas l'air correct pour cette mise en œuvre, car il est dit "éléments avec visibility: hidden...sont considérés comme pour être visibles", mais ils ne sont pas focusable.

  2. 1

    Le dialogue de l'INTERFACE utilisateur jQuery fait en capturant keydown événements, vérifier s'ils sont pour l'ONGLET ou pas, puis manuellement en concentrant l'élément correct.

  3. 0

    La jqModal plugin jQuery est-ce à la sortie de la boîte par le réglage de la modal option à true. Les exemples de cette page avec des formes doit le montrer. Je me souviens d'aller dans le code pour voir ce qui se passait, et vous pourriez le faire assez facilement avec du JS.