2012-04-05 28 views
9

私は、現在人気のあるすべてのブラウザ(IE9、Chrome、Firefox、Safari)とIE8のすべての方法で動作するものを探しています。document.activeElementが変更されたときに監視するクロスブラウザソリューションはありますか?

私は、フォーカスを失った後にFlashムーブオブジェクトにフォーカスを設定する方法を探していましたが、これを実行するすべての歴史的な方法が失敗することがわかりました。私はそれがもう一つのセキュリティ上の問題だと考えています。

ここで、document.activeElementの変更イベントを監視する方法を探しています(ただし、「変更」は実際には発生しません)。

答えて

8

上記のジェームズの答えは正しいですが。私はfocusイベントの使用と一緒にそれを完全に動作する解決策にするための詳細を追加しました。

<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

私の経験では、ブラウザ間の問題に関する最良の情報源はQuirksmodeです。ここでは、 "明白な"(しかし、使用できない)オプション - フォーカスとブラーイベントへのリンクがあります。

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

奇妙なことに(そして驚くべきことに)それはここ軟膏で飛ぶされているのWebkitベースのブラウザです。

また、インターバルタイマを使用して、activeElementが単独のオプションとして、またはフォーカス/ブラーのバックアップとして変更されたかどうかを確認することもできます。 (これらのオプションをカバーすると、あなたのintervalTimerはほとんど決してクリーンアップする必要はありません。キーの押下、マウスのクリック、タッチでactiveElementが変化するかどうかを確認することもできます。

+0

私は今のところインターバルを使用していますが、私の無知が私を抱きしめていると思いました。しかし、今はしばらくの間探していて、より良いものを見つけられませんでした。私が問題のフラッシュを取り除くことができれば、それはより簡単だろう。素晴らしいソース、ありがとう! –

2

フォーカス/ブラーとフォーカス/フォーカス(IE)イベントのキャプチャを組み合わせて使用​​できるようです。おそらくこのような何か:addEventListenerの定期blurは、「ブラー」を捕獲する一方

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

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

onfocusoutは泡立て「ブラー」をキャッチします。

blurHappenedにチェックを追加する必要がある場合があります。私はテストしていないので、私は確信していません。

関連する問題