¿Cómo hacer que un elemento HTML no sea enfocable?

Question

¿Es posible hacer un elemento HTML no enfocable?

Entiendo que a list of elements that can receive focus se puede definir y que un usuario puede navegar a través de estos elementos presionando una tecla Tab. También veo que depende del navegador controlar esto.

Pero tal vez haya una manera de hacer que ciertos elementos no se puedan enfocar, digamos que quiero que un usuario omita cierta etiqueta de anclaje al presionar una tabulación.

Answer 1

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

Un valor negativo significa que el elemento debe ser enfocable, pero no debe poderse acceder mediante la navegación secuencial con el teclado.

https://developer.mozilla.org/nl/docs/Web/HTML/Global_attributes/tabindex

Answer 2

TabIndex es lo que buscas: http://www.w3schools.com/jsref/prop_html_tabindex.asp.

Cuando establece un valor de tabIndex en -1, se lo saltará al tabular a través de su formulario.

Answer 3

Para el elemento no desea estar centrado en la pestaña, usted tiene que poner el índice de tabulación como un valor negativo.

Answer 4

Estaba leyendo el código fuente de YouTube, veo enfocable = "false"

<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="" fill="#4285F4" viewBox="0 0 24 24" height="24" width="24" style="margin-left: 4px; margin-top: 4px;"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>

¿Es eso una respuesta más correcta?

Answer 5

Para evitar por completo el enfoque, no solo al utilizar el botón de la pestaña, configure disabled como un atributo en su elemento 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.