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


227

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


3
¿Qué quieres que suceda cuando lo 'enfocas'? Los Divs no aceptan entradas, entonces, ¿desea parpadear el borde o un resaltado de fondo, etc.?
Michael Shimmins

@ Michael, sí, necesito ese <div> para llamar la atención del usuario ...
OM The Eternity


1
@MichaelShimmins y cualquier otra persona, los elementos <div> pueden aceptar entradas si tiene contenido configurado como verdadero. (Razón por la que pregunté)
MattOlivos

1
@MichaelShimmins divs puede aceptar entradas si se desbordan y muestran una barra de desplazamiento. Cuando divse enfoca a con una barra de desplazamiento, las teclas de flecha desplazarán su contenido (en lugar del contenido de otros elementos como body).
Rory O'Kane

Respuestas:


101
window.location.hash = '#tries';

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


2
@Casey Chu: Funciona bien, es decir, pero no en Firefox, ¿tienes alguna idea?
Haseeb Akhtar

No funciona en algunas versiones de Chrome ... Sin embargo, la solución @vinoths lo hace
Charliemops

1
Esto funciona pero ... ¡con Angular tendrías problemas!
Carlos Verdes

@CarlosVerdes; ¿Hay una solución para Angular?
Mac Vicious

3
sin responder a la pregunta de 'enfoque', esta no debería ser la respuesta correcta. en mi caso, quiero centrarme en un div 'contentEditable', y tu truco no ayuda.
arnaudambro

453

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.


66
@Michael Shimmins, esto permite que el elemento sea enfocable (¡de una manera no estándar!) Con focus().
extraño

2
@Olical: estoy bastante seguro de que eso es exactamente lo que dice en la última línea de respuesta. Avíseme si cree que hay un problema que necesita una edición.
Fenton

2
Si no estaba claro, añadiendo tabindexa un elemento hará que sea enfocable, que permite a las focus()y los blur()métodos, y luego se puede desencadenar un foco de esta manera:document.getElementById('tries').focus();
pilaf

44
Hola @SteveOwen: parece que todavía funciona en Firefox v42. He agregado un fragmento a esta respuesta para que pueda ejecutarlo y probarlo.
Fenton

99
@SteveOwen usando window.location.hash = ...es la forma de hacerlo. enfoque no significa "poner a la vista", solo significa, literalmente, colocar el foco en ese elemento.
Fenton

76

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


2
Tenga en cuenta que esta solución no funcionará en IE, Opera o Safari.
AlecRust

1
Acabo de probar esto en Chrome 65 y no funciona. El div de superposición se desplaza a la vista, pero el foco todavía está en el div de fondo. La única forma segura que conozco es tener un elemento tabulable (usando tabindexatributo) en el div superpuesto y usarlo focus()en ese elemento.
Thdoan

@ om-the-eternity ya declaró que quiere que el div llame la atención del usuario, por lo que lo que necesita es no enfocar realmente (incluso cuando funciona no es correcto hacerlo) el div, sino llevarlo a la pantalla , esto resuelve eso
Omar Vazquez

Si hago esto en Chrome, se sigue desplazando hacia el campo de entrada aún enfocado. Especialmente si la página aún no se carga.
Roger Krueger el

37

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.

1
Wow, gracias genial truco. ¡Gracias! No habría descubierto esto de otra manera.
AVProgrammer

Salvavidas, gracias. En Edge, un div puede enfocarse pero no en Chrome sin este truco. La respuesta aceptada es excelente, pero no quiero una parte adicional en la URL.
Cal

salva la vida. Funciona bien con Chrome y
Firefox

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

Esto funciona para mí en Chromium / Chrome 46 solo combinado con$('#inner').focus();
TNT

2

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;
}

1

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>


0

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.