web-dev-qa-db-fra.com

Comment répéter le tabindex de 1 après qu'il soit passé au dernier élément avec un tabindex?

Ainsi, par exemple, voici un script:

<!-- Random content above this comment -->
<input type="text" tabindex="1" />
<input type="text" tabindex="2" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<!-- Nothing underneath this comment -->

Ainsi, lorsque l'utilisateur appuie sur tabulation et passe par les six zones de texte, atteint la dernière, puis appuie sur tabulation, il irait au contenu au-dessus du premier commentaire, non? Eh bien, comment puis-je commencer à partir de tabindex="1" encore?

javascriptjqueryhtmltabindex
19
Lucas

Malheureusement, vous ne pouvez pas le faire sans Javascript. Vous pouvez écouter un TAB (et assurez-vous que ce n'est pas SHIFT+TAB), appuyez sur votre dernier élément et définissez manuellement le focus sur votre premier élément dans le gestionnaire. Cependant, lier cette logique aux événements du clavier (c'est-à-dire la méthode d'entrée spécifique) n'est pas universel et peut ne pas fonctionner lors de l'utilisation:

  • Un navigateur mobile
  • Certains autres appareils de divertissement (smart tv, console de jeux, etc. - ils utilisent généralement un D-Pad pour sauter entre les éléments focalisables)
  • Un service d'accessibilité

Je suggère une approche plus universelle qui est indépendante de la façon dont l'orientation est modifiée.

L'idée est que vous entouriez vos éléments de formulaire (où vous voulez créer une " boucle tabindex") avec des éléments spéciaux "focus guard" qui peuvent également être focalisés (ils ont un tabindex affecté). Voici votre code HTML modifié:

<p>Some sample <a href="#" tabindex="0">content</a> here...</p>
<p>Like, another <input type="text" value="input" /> element or a <button>button</button>...</p>

<!-- Random content above this comment -->
<!-- Special "focus guard" elements around your
if you manually set tabindex for your form elements, you should set tabindex for the focus guards as well -->
<div class="focusguard" id="focusguard-1" tabindex="1"></div>
<input id="firstInput" type="text" tabindex="2" class="autofocus" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<input id="lastInput" type="text" tabindex="7" />
<!-- focus guard in the end of the form -->
<div class="focusguard" id="focusguard-2" tabindex="8"></div>
<!-- Nothing underneath this comment -->

Maintenant, il vous suffit d'écouter les événements focus sur ces éléments de garde et de changer manuellement le focus sur le champ approprié (jQuery utilisé pour des raisons de simplicité):

$('#focusguard-2').on('focus', function() {
  // "last" focus guard got focus: set focus to the first field
  $('#firstInput').focus();
});

$('#focusguard-1').on('focus', function() {
  // "first" focus guard got focus: set focus to the last field
  $('#lastInput').focus();
});

Comme vous le voyez, je me suis également assuré que nous revenions à la dernière entrée lorsque le focus recule de la première entrée (par ex. SHIFT+TAB sur la première entrée). exemple en direct

Notez que les focus guards se voient également attribuer une valeur tabindex pour vous assurer qu'ils sont focalisés immédiatement avant/après vos champs de saisie. Si vous ne définissez pas manuellement tabindex sur vos entrées, les deux gardes de focus peuvent simplement avoir tabindex="0" attribué.

Bien sûr, vous pouvez également faire fonctionner tout cela dans un environnement dynamique, lorsque votre formulaire est généré dynamiquement. Il suffit de comprendre vos éléments focalisables (tâche moins triviale) et de les entourer des mêmes gardes de focus.

J'espère que cela vous aidera, faites-moi savoir si vous avez des problèmes.

[~ # ~] mise à jour [~ # ~]

Comme l'a souligné nbro, la mise en œuvre ci-dessus a pour effet indésirable de sélectionner le dernier élément si l'on frappe TAB après le chargement de la page (car cela concentrerait le premier élément focalisable qui est #focusguard-1, et cela déclencherait la mise au point de la dernière entrée. Pour atténuer cela, vous pouvez spécifier l'élément que vous souhaitez initialement ciblé et le concentrer avec un autre petit morceau de JavaScript:

$(function() { // can replace the onload function with any other even like showing of a dialog

  $('.autofocus').focus();
})

Avec cela, définissez simplement la classe autofocus sur l'élément que vous voulez, et il sera concentré sur le chargement de la page (ou tout autre événement que vous écoutez).

23
Dmitry Pashkevich

Voici ma solution où vous n'avez besoin d'aucun autre élément. Comme vous pouvez le voir, les éléments boucleront à l'intérieur de <form> éléments.

$('form').each(function(){
    var list  = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex < b.tabIndex ? -1 : 1; }),
        first = list.first();
    list.last().on('keydown', function(e){
        if( e.keyCode === 9 ) {
            first.focus();
            return false;
        }
    });
});
8
redexp

Oui, après avoir parcouru les entrées, il sautera sur les éléments appropriés sans ordre de tabulation spécifié. Mais aussi, après avoir tabulé tous les éléments "tabables", le focus passera "en dehors" du contenu de votre page, sur les éléments d'interface utilisateur du navigateur (onglets, menus, signets, etc.)

Je pense que la façon la plus simple est de gérer l'événement keyup sur la dernière entrée et intercepter TAB utilisation (et SHIFT+TAB d'ailleurs)

1
CyberDude

Voici ma solution, considérant que la première entrée a le jeu d'attributs "autofocus":

Ajoutez ceci après votre élément de formulaire (avec HTML5 cela peut être n'importe quelle balise):

<div tabindex="6" onFocus="document.querySelector('[autofocus]').focus()"></div>
1
Nicolas Goy

Je vous suggère d'augmenter votre tabindex ie. > 100 et donnez également tabIndex à votre div de conteneur "contenu". Veuillez noter que votre conteneur de contenu doit avoir un tabindex inférieur aux zones de saisie pour ex.99.

lorsque vous appuyez sur l'onglet de la dernière zone de saisie, définissez manuellement le focus sur votre div de contenu à l'aide de javascript (vous pouvez utiliser des gestionnaires de touches pour la touche de tabulation)

document.getElementById("content").focus();

vous devez donner tabindex à votre "contenu" pour y mettre le focus.

maintenant, si vous appuyez sur l'onglet, le focus passera automatiquement à la première zone de saisie.

j'espère que cela vous aidera.

Je vous remercie

0
Nitesh Patil