Empêcher tabstop sur un élément (lien d'ancrage) en HTML


152

Est-il possible d'annuler une <a href="...">tabulation dans n'importe quel navigateur? J'aimerais faire cela sans Javascript.

Réponses:


265

Certains navigateurs prennent en charge l' tabindex="-1"attribut, mais pas tous, car il ne s'agit pas d'un comportement standard.


22
Oh génial! Merci! J'ai vérifié avec FF3.5, IE8 et CH3 et cela fonctionne dans les trois. Mille mercis!
— Robert Koritnik

1
Pas de soucis à ce sujet: tout comme zzzzBov le déclare ici , HTML5 est venu à la rescousse et a standardisé cette fonctionnalité. Alors maintenant, les navigateurs coupables sont ceux qui manquent cela.
— TechNyquist

1
Gardez à l'esprit que la désactivation de l'arrêt de tabulation sur un lien hypertexte va à l'encontre des règles d'accessibilité (par exemple, les personnes utilisant des lecteurs d'écran, etc.). Si vous savez que ce n'est pas un problème pour votre base d'utilisateurs, alors ça devrait aller.
— Ricardo Sanchez

73

Les navigateurs modernes et compatibles HTML5 prennent en charge l' [tabindex]attribut , où la valeur de -1empêchera l'élément d'être tabulé.

Si la valeur est un entier négatif
L'agent utilisateur doit autoriser le focus de l'élément, mais ne doit pas permettre à l'élément d'être atteint à l'aide de la navigation de focus séquentielle.


1
Les extraits de documentation sont toujours utiles. ;-) Cela nous indique que ceux qui ne soutiennent pas cela sont parmi les rares et qu'ils le soutiendront probablement tôt ou tard.
— Robert Koritnik le

15

Vous pouvez appliquer un gestionnaire JQuery à l'élément que vous souhaitez cibler sur plusieurs éléments sans tabulation.

$(document).ready(function () {
    $('.class').attr('tabindex', '-1');
});

Ce serait une façon de le faire ...


6

Je pense que vous pouvez le faire en javascript, vous remplacez le bouton window.onkeypressou onkeydown, piègez le bouton de l'onglet et définissez le focus dans l'ordre souhaité.


2
Je ne sais pas si vous avez vérifié d'autres réponses, en particulier accepté une réponse à laquelle il y a environ un an et résolu ce problème sans utiliser Javascript.
— Robert Koritnik

2
J'apprécie la solution alternative même si elle n'aborde pas le PO ainsi que la réponse acceptée. Pas besoin d'être désobligeant.
— Anthony DiSanti

@Anthony DiSanti: C'est vrai, mais dans ce cas particulier, je ne vois toujours pas pourquoi on recourrait à javascript si quelque chose d'autre fonctionne mieux? Donc, si ce n'est pas une réponse à cette question, pourquoi est-ce là alors? Ça ne fait rien. Javascript est généralement la dernière étape à franchir si certaines choses ne peuvent pas être faites autrement. Et je suis désolé @Ammosi si je t'ai insulté. Je ne voulais pas être impoli. Merci pour la réponse tardive.
— Robert Koritnik

7
Je suis d'accord pour éviter le javascript s'il existe une solution HTML ou CSS normalisée. Cependant, dans ce cas, il n'y en a pas. L'affiche originale n'avait pas besoin de prendre en charge les navigateurs avant IE8 et FF3.5, mais pour mon travail, j'ai besoin de revenir à IE6. La solution tabindex n'est donc pas applicable. Fournir la seule solution fonctionnelle dans le navigateur avec la plus grande part de marché ne doit pas être découragé.
— Anthony DiSanti

4

Supprimez l' hrefattribut de votre balise d'ancrage


et si je ne peux pas?
— Hakan Fıstık

Si vous êtes prêt à utiliser javascript malgré la question pour éviter ce genre de solutions, pour supprimer les attributs href, utilisez jquery document onload avec quelque chose comme$('[href="whatever-the-url-is"]').removeAttr('href');
— Jonas Lundman

6
LOL supprimer le href
— quemeful
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.