2012-04-05 27 views
9

Tôi thực sự đang tìm kiếm thứ gì đó phù hợp với tất cả các trình duyệt phổ biến hiện tại (IE9, Chrome, Firefox, Safari) và tất cả cách quay lại IE8.Có giải pháp qua trình duyệt để theo dõi khi document.activeElement thay đổi không?

Mặc dù, tôi đã tìm cách tập trung vào đối tượng di chuyển Flash sau khi nó bị mất tiêu điểm, tôi đã thấy rằng tất cả các cách lịch sử để thực hiện điều này đều không thành công. Tôi cho rằng đó là một vấn đề bảo mật khác.

Vì vậy, tôi hiện đang tìm cách theo dõi các sự kiện thay đổi của một số loại cho tài liệu.activeElement (mặc dù "thay đổi" không thực sự xảy ra).

Trả lời

8

Trong khi câu trả lời của @ James ở trên là chính xác. Tôi đã thêm nhiều chi tiết hơn để làm cho nó trở thành giải pháp hoàn toàn làm việc cùng với việc sử dụng sự kiện 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

Theo kinh nghiệm của tôi, nguồn thông tin tốt nhất về các vấn đề liên quan đến trình duyệt là Quirksmode. Đây là một liên kết đến tùy chọn "hiển nhiên" (nhưng không sử dụng được) - các sự kiện lấy nét và làm mờ.

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

Nhưng kỳ lạ (và đáng ngạc nhiên) nó là trình duyệt Webkit dựa trên là những con ruồi trong thuốc mỡ ở đây.

Một tùy chọn khác là sử dụng bộ đếm thời gian để kiểm tra xem activeElement đã thay đổi hoặc là tùy chọn duy nhất HOẶC làm bản sao lưu cho lấy nét/làm mờ. (Bạn cũng có thể nghe các lần nhấn phím, nhấp chuột và chạm để kiểm tra xem các thay đổi activeElement.) Nếu bạn bao gồm các tùy chọn này, thì intervalTimer của bạn sẽ hầu như không bao giờ cần dọn dẹp.

+0

Tôi đang sử dụng khoảng thời gian ngay bây giờ, nhưng nghĩ rằng sự thiếu hiểu biết của tôi đang giữ tôi quay lại. Tuy nhiên, tìm kiếm trong một thời bây giờ và đã không tìm thấy bất cứ điều gì tốt hơn. Nếu tôi có thể đưa Flash ra khỏi vấn đề thì sẽ dễ dàng hơn. Nguồn tuyệt vời, cảm ơn bạn! –

2

Dường như bạn có thể sử dụng kết hợp chụp các sự kiện lấy nét/mờ và lấy nét/lấy nét (IE). Một cái gì đó giống như có lẽ đây:

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

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

onfocusout sẽ bắt bọt "mờ" trong khi thường xuyên blur trên addEventListener sẽ chụp "mờ".

Bạn có thể cần thêm séc bổ sung trong blurHappened. Tôi không chắc là tôi chưa thử nghiệm.

Các vấn đề liên quan