Rendre un élément HTML non focalisable

Question

Est-il possible de créer un élément HTML non focalisable ?

Je comprends que une liste d'éléments qui peuvent recevoir l'attention peuvent être définis et qu'un utilisateur peut naviguer à travers ces éléments en appuyant sur une touche Tab clé. Je constate également qu'il appartient au navigateur de contrôler cela.

Mais il existe peut-être un moyen de rendre certains éléments non focalisables, par exemple si je veux que l'utilisateur saute un certain nombre d'éléments. <a> en appuyant sur une touche Tab .

Answer 1

<a href="http://foo.bar" tabindex="-1">unfocusable</a>

Une valeur négative signifie que l'élément doit être focalisable, mais qu'il ne doit pas être accessible par une navigation séquentielle au clavier.

Voir aussi developer.mozilla.org

Answer 2

Pour empêcher complètement la mise au point, et pas seulement lors de l'utilisation de la fonction tab régler la valeur de la touche disabled en tant qu'attribut dans votre élément HTML.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<input class="form-control" type="text"> Click this, you can see it's focusable.

<input class="form-control" type="text" readonly>  Click this, you can see it's focusable.

<input class="form-control" type="text" readonly tabindex="-1">  Click this, you can see it's focusable. Not tab'able.

<input class="form-control" type="text" disabled>  Click this, you can see it's <strong>not</strong> focusable.

Answer 3

Afin d'empêcher un élément de prendre le focus ("non-focusable"), vous devez utiliser Javascript pour guetter l'apparition de la balise focus et empêcher l'interaction par défaut.

Pour empêcher la tabulation d'un élément, utilisez l'option tabindex=-1 attribut.

Ajout tabindex=-1 rendra n'importe quel élément focalisable, même div éléments. Cela signifie que lorsqu'un utilisateur clique sur un élément, il est probable qu'il reçoive un contour de mise au point, en fonction du navigateur

Dans l'idéal, c'est ce que vous souhaitez :

/**
 * @this {HTMLElement}
 * @param {FocusEvent} event
 * @return {void}
 */
function preventFocus(event) {
  if (event.relatedTarget) {
    // Revert focus back to previous blurring element
    event.relatedTarget.focus();
  } else {
    // No previous focus target, blur instead
    this.blur();
    // Alternatively: event.currentTarget.blur();
  }
}

/* ... */

element.setAttribute('tabindex', '-1');
element.addEventListener('focus', preventFocus);

Pour un contrôle de type sûr, vous pouvez effectuer les opérations suivantes if (event.relatedTarget instanceof HTMLElement) au lieu de if (event.relatedTarget) .

Answer 4

TabIndex est ce que vous recherchez : http://www.w3schools.com/jsref/prop_html_tabindex.asp .

Si vous attribuez la valeur -1 à un tabIndex, celui-ci sera ignoré lors de la navigation dans le formulaire.

Answer 5

Si vous êtes à la recherche d'une solution globale :

<a href="#" class="__nofocus" tabindex="-1">Link</a>

document.body.addEventListener('focusin', (e) => {
  if (e.target.classList.contains('__nofocus')) {
    e.relatedTarget ? e.relatedTarget.focus() : e.target.blur();
  }
});

Cela devrait fonctionner pour les ancres, les boutons et tout ce qui peut recevoir le focus par défaut. N'oubliez pas de définir tabindex="-1" et l'élément ne pourra pas être contourné par la navigation par touche de tabulation.