Utilisation de jQuery pour contourner les problèmes de tabindex

Question

J'essaie de contrôler mes formulaires et la façon dont l'utilisateur interagit avec eux via la propriété tabindex des éléments de formulaire. Tous mes éléments ont tabindex spécifié, et je veux que cette valeur soit respectée et utilisée correctement.

Je suis en train de développer sur Mac/Firefox et je suis conscient du paramétrage du système Mac par défaut qui permet de passer de la tabulation aux seuls éléments et listes d'entrée. Cependant, je veux remplacer ce paramètre et tous les autres paramètres qui pourraient gêner le fonctionnement de tout système/navigateur. J'utilise jQuery pour essayer de contourner ce problème. Voici mon code à ce stade:

$(":input").keypress(function(e){ 
    if (e.which == 0) 
    { 
     tindex = parseInt($(this).attr("tabindex")) + 1; 
     $(":input[tabindex='" + tindex + "']").focus(); 
    } 
}); 

Cependant, cela ne fonctionne pas comme je le souhaite. Lorsque le paramètre Mac par défaut est activé, cela saute un tabindex et ignore les éléments non-text/textarea. Par exemple, si je suis sur input[tabindex=2] et que j'appuie sur la touche "Tab", je suis envoyé au input[tabindex=4]. Si je suis sur input[tabindex=2] et qu'il y a une boîte select entre input[tabindex=2] et input[tabindex=4], je suis envoyé à input[tabindex=5].

Je veux input[tabindex=2] pour m'envoyer à input[tabindex=3], select[tabindex=3], input[type=radio][tabindex=3], etc. Fondamentalement tout ce qui a tabindex de 3.

Faites-moi savoir des idées pour contourner ce problème. Aussi s'il vous plaît dites-moi si vous savez quelque chose d'autre sur d'autres systèmes/navigateurs que je devrais regarder.

Answer 1

Ajoutez e.preventDefault(); à votre gestionnaire d'événements de touche. Cela empêchera le navigateur d'effectuer son action par défaut sur cet événement. Cela empêchera également le navigateur de suivre un lien s'il est placé dans un gestionnaire de clic.

Voir documentation.