Come determinare dove è stata messa a fuoco?

Question

Questo è stato richiesto here prima, ma diversi anni fa, e al momento non esisteva una soluzione multipiattaforma (a parte la soluzione setTimeout, che in realtà non è molto utile).

Mi piacerebbe fare onblur="foo(parm);" e avere foo essere in grado di determinare quale elemento ha ora lo stato attivo.

Sto usando javascript regolare; no jQuery per questo, per favore.

È possibile in questi giorni?

Answer 1

Si può provare qualcosa di simile:

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

In jQuery, su richiesta del PO:

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

Answer 3

Domanda interessante. Il nocciolo della questione è - quando scocca l'evento "focus", prima o dopo l'evento di sfocatura? Se si attiva prima dell'evento di sfocatura, il problema è semplice, perché è possibile archiviare lo stato attivo in una variabile a cui può accedere l'evento sfocatura.

Tuttavia, almeno in Chrome 13, sembra che l'evento sfocatura si verifichi prima dell'evento di messa a fuoco. Una possibile soluzione.

Dato il seguente codice HTML:

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

È possibile:

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

Fondamentalmente, io proprio non la richiamata sfocatura quindi è a portata di mano per l'evento di messa a fuoco di chiamare dopo che sappiamo di che elemento è stato focalizzato.

Ecco un working example su JSFiddle.

EDIT: questa soluzione soffre del problema che, se si sfocatura sul form cliccando su qualcosa altro che un altro elemento del modulo, l'evento sfocatura non si attiva mai (visto che attendere l'evento di messa a fuoco). L'unico modo che posso immaginare è l'utilizzo di un timer per controllare se PendingBlur è definito e, in tal caso, chiamarlo. A questo punto non hai più bisogno dell'evento di messa a fuoco per richiamare più il callback della sfocatura ...