¿Existe una solución de varios navegadores para monitorear cuando el document.activeElement cambia?

Realmente estoy buscando algo que funcione con todos los navegadores populares actuales (IE9, Chrome, Firefox, Safari) y todo el camino de regreso a IE8.¿Existe una solución de varios navegadores para monitorear cuando el document.activeElement cambia?

A pesar de que he estado buscando una forma de enfocarme en un objeto de movimiento de Flash después de haber perdido el foco, he descubierto que todas las formas históricas de hacerlo fallan. Supongo que es otro problema de seguridad.

Por lo tanto, ahora estoy buscando cómo supervisar eventos de algún tipo de cambio para document.activeElement (aunque "cambio" realmente no ocurre).

Fuente

2012-04-05 Anonymous

Mientras que la respuesta de @ James es correcta. He agregado más detalles para que sea una solución completamente funcional junto con el uso del evento focus también.

<html> 
<body> 
    <input type="text" id="Text1" name ="Text1" value=""/> 
    <input type="text" id="Text2" name ="Text2" value=""/> 
    <SELECT><OPTION>ASDASD</OPTION><OPTION>A232</OPTION></SELECT> 
    <INPUT TYPE="CHECKBOX" id="Check1"/> 
    <INPUT type="TEXT" id="text3"/> 
    <input type="radio"/> 
    <div id="console"> </div> 
    <textarea id="textarea1"> </textarea> 
    <script> 

     var lastActiveElement = document.activeElement; 

     function detectBlur() { 
      // Do logic related to blur using document.activeElement; 
      // You can do change detection too using lastActiveElement as a history 
     } 

     function isSameActiveElement() { 
      var currentActiveElement = document.activeElement; 
      if(lastActiveElement != currentActiveElement) { 
       lastActiveElement = currentActiveElement; 
       return false; 
      } 

      return true; 
     } 

     function detectFocus() { 
      // Add logic to detect focus and to see if it has changed or not from the lastActiveElement. 
     } 

     function attachEvents() { 
      window.addEventListener ? window.addEventListener('focus', detectFocus, true) : window.attachEvent('onfocusout', detectFocus); 

      window.addEventListener ? window.addEventListener('blur', detectBlur, true) : window.attachEvent('onblur', detectBlur); 
     } 

     attachEvents(); 

    </script> 
</body> 
</html>

Fuente

2015-01-28 14:30:48 Swaroop

En mi experiencia, la mejor fuente de información sobre problemas con navegadores cruzados es Quirksmode. Aquí hay un enlace a la opción "obvia" (pero no utilizable): enfocar y desenfocar eventos.

http://www.quirksmode.org/dom/events/blurfocus.html

Curiosamente (y sorprendente) es navegadores basados en WebKit que son la mosca en la sopa aquí.

Otra opción sería usar un temporizador de intervalos para verificar si el elemento activo ha cambiado como su única opción O como una copia de seguridad para el enfoque/desenfoque. (También puede escuchar las pulsaciones de teclas, los clics del mouse y los toques para verificar si el elemento activo cambia). Si cubre estas opciones, su intervalTimer casi nunca tendrá que limpiar.

Fuente

2012-04-05 20:37:08 podperson

Estoy usando un intervalo en este momento, pero pensé que mi ignorancia me estaba frenando. Sin embargo, buscando por un tiempo ahora y no he encontrado nada mejor. Si pudiera sacar Flash del problema, sería más fácil. Impresionante fuente, ¡gracias! –

Parece que puede usar una combinación de captura de foco/desenfoque y eventos de enfoque/enfoque (IE). Tal vez algo como esto:

window.addEventListener ? 
    window.addEventListener('blur', blurHappened, true) 
    : window.attachEvent('onfocusout', blurHappened); 

function blurHappened() { 
    console.log('document.activeElement changed'); 
}

onfocusout cogerá burbujear "borrones", mientras regulares blur en addEventListener capturarán "borrones".

Es posible que deba agregar comprobaciones adicionales en blurHappened. No estoy seguro ya que no he probado.

Fuente

2012-04-05 20:41:53 James

¿Existe una solución de varios navegadores para monitorear cuando el document.activeElement cambia?

Respuesta

Cuestiones relacionadas