¿Cómo se borra el foco en javascript?

159

Sé que esto no debería ser tan difícil, pero no pude encontrar la respuesta en Google.

Quiero ejecutar una pieza de javascript que borre el foco de cualquier elemento en el que esté sin saber de antemano en qué elemento está el foco. Tiene que funcionar en Firefox 2, así como en navegadores más modernos.

¿Existe una forma correcta de hacer esto?

javascript focus

— Andres
fuente

¿Qué significa un enfoque claro? - ¿Es lo mismo que desenfoque?

— plodder

3

Quiero hacerlo para que ningún elemento en el navegador tenga foco.

— Andrés

170

Responder: document.activeElement

Para hacer lo que quieras, usa document.activeElement.blur()

Si necesita soportar Firefox 2, también puede usar esto:

function onElementFocused(e)
{
    if (e && e.target)
        document.activeElement = e.target == document ? null : e.target;
} 

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);

— jps
fuente

8

Si Firefox 2, con 0,66% de participación en el navegador, es un factor decisivo ... Tengo una solución, que está en mi respuesta editada.

— jps

21

En 2013, la cuota de navegador de Firefox 2 es sustancialmente inferior al 0,66%, y lo simple document.activeElement.blur()es la mejor manera de lograr este efecto.

— chowey

88

.focus()y luego .blur()algo más arbitrario en tu página. Como solo un elemento puede tener el foco, se transfiere a ese elemento y luego se elimina.

— Kevin Reid
fuente

¿Hay alguna manera de hacer un elemento invisible que tenga foco?

— Andrés

1

No soy un experto en la mejor forma de hacerlo; pero ciertamente podría colocarlo fuera de la pantalla o fuera de los límites de un overflow: clipelemento con estilo. Pero podría usar un campo que ya existe en la página. O cree uno solo para el propósito y retírelo nuevamente.

— Kevin Reid

Creo que establecer el foco en un elemento fuera de la pantalla forzará un desplazamiento hacia ese elemento. Sin embargo, puede crear un elemento invisible para ese propósito. Dicho esto, algunos navegadores pueden tener dificultades para eliminar el cursor. Simplemente blur () probablemente funcionaría mejor. Aún podría obtener claves con un controlador de eventos keyup (keydown).

— Alexis Wilke

55

Esta respuesta está desactualizada y no se aplica en el año 2017. Use activeElement en su lugar, como en stackoverflow.com/a/2520670/39808

— Paul Fisher

Todavía funciona, solo más tiempo y mueve el foco (lo que puede interferir con la navegación TAB). Tampoco es evidente de inmediato qué debería ser "algo más arbitrario".

— user202729

50

document.activeElement.blur();

Funciona mal en IE9: borra toda la ventana del navegador si el elemento activo es el cuerpo del documento. Es mejor verificar este caso:

if (document.activeElement != document.body) document.activeElement.blur();

— pwnzor1337
fuente

Eso es cierto, pero hoy en día casi nadie usa IE9.

— Pato Donald

18

Ninguna de las respuestas proporcionadas aquí es completamente correcta cuando se utiliza TypeScript, ya que es posible que no conozca el tipo de elemento seleccionado.

Por lo tanto, esto sería preferible:

if (document.activeElement instanceof HTMLElement)
    document.activeElement.blur();

Además, desalentaría el uso de la solución proporcionada en la respuesta aceptada, ya que el desenfoque resultante no es parte de la especificación oficial y podría romperse en cualquier momento.

— wilcobrouwer
fuente

66

Es divertido ver cómo una pregunta que hice en 2010 sigue teniendo una respuesta en evolución.

— Andres

2

dummyElem.focus () donde dummyElem es un objeto oculto (por ejemplo, tiene zIndex negativo)?

— empollón
fuente

0

Puede llamar a window.focus ();

pero mover o perder el foco seguramente interferirá con cualquiera que use la tecla de tabulación para moverse por la página.

podría escuchar el código de tecla 13 y renunciar al efecto si se presiona la tecla de tabulación.

— Kennebec
fuente

-3

Con jQuery es solo: $(this).blur();

— bsbak
fuente

2

Esta es una respuesta anterior, por lo que es posible que la conozca ahora, pero hay dos razones por las que esta respuesta no se aplica. 1. Asume que el OP estaba usando jquery, 2. thisnecesita ser el elemento enfocado, mientras que la pregunta establece explícitamente que el OP no conoce el elemento enfocado antes de tiempo.

— Brandon