¿Es posible enfocar un <div> usando la función focus() de JavaScript?

¿Es posible enfocar un <div> usando la función focus() de JavaScript?

Tengo una etiqueta <div>

<div id="tries">You have 3 tries left</div>

Estoy intentando enfocar el <div> anterior usando :

document.getElementById('tries').focus();

Pero no funciona. ¿Alguien podría sugerir algo...?

Respuesta #1

Sí, esto es posible. Para hacerlo, necesitas asignar un tabindex...

<div tabindex="0">Hello World</div>

Un tabindex de 0 colocará la etiqueta "en el orden natural de tabulación de la página". Un número mayor le dará un orden específico de prioridad, donde 1 será el primero, 2 el segundo y así sucesivamente.

También puedes dar un tabindex de -1, lo que hará que el div solo pueda recibir el foco mediante un script, no por el usuario.

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

Obviamente, es una vergüenza tener un elemento al que se puede enfocar mediante un script y que no se puede enfocar mediante otro método de entrada (especialmente si un usuario solo usa el teclado o tiene restricciones similares). También hay un montón de elementos estándar que son enfocables por defecto y tienen información semántica incorporada para ayudar a los usuarios. Usa este conocimiento sabiamente.

Respuesta #2

window.location.hash = '#tries';

Esto desplazará hasta el elemento en cuestión, esencialmente "enfocándolo".

Respuesta #3

document.getElementById('tries').scrollIntoView() funciona. Esto funciona mejor que window.location.hash cuando tienes posicionamiento fijo.

Respuesta #4

Puedes usar tabindex

<div tabindex="-1"  id="tries"></div>

El valor de tabindex puede permitir un comportamiento interesante.

• Si se asigna un valor de "-1", no se puede acceder al elemento mediante tabulación, pero se le puede dar enfoque al elemento de forma programática (usando element.focus()).
• Si se le asigna un valor de 0, el elemento puede ser enfocado mediante el teclado y forma parte del flujo de tabulación del documento. Los valores mayores que 0 crean un nivel de prioridad, siendo 1 el más importante.

Respuesta #5

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

Respuesta #6

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>