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

¿Es posible centrarse en <div>usar una focus()función de JavaScript ?

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 ...?

window.location.hash = '#tries';

Esto se desplazará al elemento en cuestión, esencialmente "enfocándolo".

Sí, esto es posible. Para hacerlo, debe asignar un índice de tabla ...

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

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

También puede dar un índice tabin de -1, lo que hará que el div solo se pueda enfocar por 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 que pueda enfocar mediante un script que no pueda enfocar mediante otro método de entrada (especialmente si un usuario tiene un teclado solo o tiene una restricción similar). También hay un montón de elementos estándar que se pueden enfocar de manera predeterminada y tienen información semántica incorporada para ayudar a los usuarios. Usa este conocimiento sabiamente.

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

Puedes usar tabindex

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

El valor de tabindex puede permitir un comportamiento interesante.

• Si se le da un valor de "-1", no se puede tabular el elemento, pero se puede dar foco al elemento mediante programación (usando element.focus ()).
• Si se le da un valor de 0, el elemento puede enfocarse a través del teclado y cae en el flujo de tabulación del documento. Los valores superiores a 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>

Quería sugerir algo como el de Michael Shimmin pero sin codificar cosas como el elemento o el CSS que se le aplica.

Solo estoy usando jQuery para agregar / eliminar clase, si no desea usar jquery, solo necesita un reemplazo para agregar / eliminar Clase

--Javascript

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

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

--CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

Para hacer que el borde parpadee, puede hacer esto:

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

Esto hará que el borde se vuelva rojo sólido durante 1 segundo y luego retírelo nuevamente.