¿Cómo determinar dónde fue el foco?

Question

Esto se ha preguntado here antes, pero hace varios años, y no había una solución multiplataforma en ese momento (que no sea la solución setTimeout, que realmente no es muy útil).

Me gustaría hacer onblur="foo(parm);" y tener foo poder determinar qué elemento ahora tiene foco.

Estoy usando javascript normal; no jQuery para este, por favor.

¿Es posible hoy en día?

Answer 1

Usted puede intentar algo como esto:

function whereDidYouGo() { 
    var all = document.getElementsByTagName('*'); 

     for (var i = 0; i < all.length; i++) 
      if (all[i] === all[i].ownerDocument.activeElement) 
       return all[i]; 
} 

EDIT:

function whereDidYouGo() { return document.activeElement; } 

Answer 2

En jQuery, a petición de la OP:

$(':input').blur(function() { 
    $focusedElement = $(':input:focus'); 
    //Do stuff with $focusedElement 
} 

Answer 3

pregunta interesante. El meollo de la cuestión es: ¿cuándo se dispara el evento de "enfoque", antes o después del evento de desenfoque? Si se dispara antes del evento de desenfoque, el problema es fácil, porque puedes simplemente almacenar el foco actual en una variable a la que tu evento de desenfoque puede acceder.

Sin embargo, al menos en Chrome 13, parece que el evento de desenfoque ocurre antes de el evento de foco. Una posible solución.

Dado el siguiente código HTML:

<input id="foo" value='foo' /> 
<input id="bar" value='bar' /> 

continuación, puede:

var currentFocus; 
var pendingBlur; 

var foo = document.getElementById('foo'); 
foo.addEventListener('focus', function(){ 
    currentFocus = foo; 
    if(pendingBlur !== undefined){ 
     pendingBlur(); 
     pendingBlur = undefined; 
    } 
}); 
foo.addEventListener('blur', function(){ 
    pendingBlur = function(){ 
     console.log('new focus:', currentFocus); 
    }; 
}); 

var bar= document.getElementById('bar'); 
bar.addEventListener('focus', function(){ 
    currentFocus = bar; 
    if(pendingBlur !== undefined){ 
     pendingBlur(); 
     pendingBlur = undefined; 
    } 
}); 
bar.addEventListener('blur', function(){ 
    pendingBlur = function(){ 
     console.log('new focus:', currentFocus); 
    }; 
}); 

Básicamente, simplemente no la devolución de llamada desenfoque por lo que es muy útil para el evento de foco para llamar después de que sabemos acerca de los cuales elemento fue enfocado.

Aquí hay un working example en JSFiddle.

EDIT: Esta solución presenta el problema de que si falta de definición en el formulario haciendo clic en algo otra que otro elemento de formulario, el evento no se dispara nunca desenfoque (ya que esperar a que el evento de foco). La única forma de evitarlo, que yo pueda concebir, es usar un temporizador para verificar si pendingBlur está definido, y si es así, llamarlo. En ese punto, realmente no necesita el evento de enfoque para llamar a la devolución de llamada borrosa más ...