2012-04-05 11 views
9

Ich bin wirklich auf der Suche nach etwas, das mit allen gängigen Browsern (IE9, Chrome, Firefox, Safari) und den ganzen Weg zurück zu IE8 funktioniert.Gibt es eine browserübergreifende Lösung für die Überwachung, wenn sich das document.activeElement ändert?

Obwohl ich nach einer Möglichkeit gesucht habe, den Fokus auf ein Flash-Objekt zu setzen, nachdem es den Fokus verloren hat, habe ich festgestellt, dass alle bisherigen Möglichkeiten fehlschlagen. Ich nehme an, es ist ein weiteres Sicherheitsproblem.

So, jetzt bin ich auf der Suche nach, wie Change-Ereignisse einer bestimmten Art für das document.activeElement überwachen (obwohl "Änderung" nicht wirklich auftritt).

Antwort

8

Während @ James Antwort ist richtig. Ich habe weitere Details hinzugefügt, um es zu einer vollständig funktionierenden Lösung zusammen mit der Verwendung von focus Ereignis zu machen.

<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> 
1

Nach meiner Erfahrung ist Quirksmode die beste Informationsquelle für Cross-Browser-Probleme. Hier ist ein Link zur "offensichtlichen" (aber nicht nutzbaren) Option - Fokus- und Blur-Ereignisse.

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

Seltsamer (und überraschend) ist es Webkit-basierten Browser, die die Fliege in der Suppe hier sind.

Eine andere Option wäre die Verwendung eines Intervalltimers, um zu überprüfen, ob das activeElement entweder als einzige Option ODER als Sicherung für Fokus/Unschärfe geändert wurde. (Sie können auch nach Tastendrücken, Mausklicks und Berührungen lauschen, um zu überprüfen, ob sich activeElement ändert.) Wenn Sie diese Optionen abdecken, wird Ihr intervalTimer kaum jemals aufräumen müssen.

+0

Ich benutze gerade ein Intervall, dachte aber, meine Unwissenheit hielt mich zurück. Jetzt aber eine Weile suchen und nichts Besseres gefunden haben. Wenn ich Flash aus dem Problem herausnehmen könnte, wäre es einfacher. Tolle Quelle, danke! –

2

Es scheint, dass Sie eine Kombination von Fokus/Unschärfe und Fokussierung/Fokussierung (IE) -Ereignissen verwenden können. So etwas wie diese vielleicht:

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

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

onfocusout wird fangen sprudelt „Unschärfen“, während regelmäßige blur auf addEventListener erfassen werden „Unschärfen“.

Möglicherweise müssen Sie zusätzliche Prüfungen in blurHappened hinzufügen. Ich bin mir nicht sicher, wie ich es nicht getestet habe.