¿Es posible centrarse en un <div> usando la función focus() de JavaScript?
¿Es posible centrarse en una función <div>de JavaScript ?focus()
tengo una <div>etiqueta
<div id="tries">You have 3 tries left</div>
Estoy tratando de centrarme en lo anterior <div>usando:
document.getElementById('tries').focus();
Pero no funciona. ¿Alguien podría sugerir algo....?
Sí, esto es posible. Para hacerlo, necesita asignar un índice de tabulación...
<div tabindex="0">Hello World</div>
Un tabindex de 0 colocará la etiqueta "en el orden de tabulación natural de la página". Un número mayor le dará un orden de prioridad específico, donde 1 será el primero, 2 el segundo y así sucesivamente.
También puede proporcionar un índice de tabulación de -1, lo que hará que el div solo pueda ser enfocado por el 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 pena tener un elemento en el que puedas enfocarte mediante un script y que no puedas enfocar mediante otro método de entrada (especialmente si un usuario solo usa el teclado o tiene restricciones similares). También hay una gran cantidad de elementos estándar que se pueden enfocar de forma predeterminada y que tienen información semántica integrada para ayudar a los usuarios. Utilice este conocimiento sabiamente.
window.location.hash = '#tries';
Esto se desplazará hasta el elemento en cuestión, esencialmente "enfocándolo".
document.getElementById('tries').scrollIntoView()obras. Esto funciona mejor que window.location.hash cuando tienes una posición fija.
Puedes usar tabindex
<div tabindex="-1" id="tries"></div>
El valor del tabindex puede permitir algún comportamiento interesante.
- Si se le da un valor de "-1", no se puede tabular el elemento, pero se le puede dar foco mediante programación (usando element.focus()).
- Si se le asigna un valor de 0, el elemento se puede enfocar mediante el teclado y cae en el flujo de tabulación del documento. Los valores mayores que 0 crean un nivel de prioridad, siendo 1 el más importante.
<div id="inner" tabindex="0">
this div can now have focus and receive keyboard events
</div>
