JavaScript / jQuery: Kiểm tra xem cửa sổ có tiêu điểm không

Làm thế nào để bạn kiểm tra xem trình duyệt có tiêu điểm hay không?

Tôi chưa thử nghiệm điều này trong các trình duyệt khác, nhưng nó có vẻ hoạt động trong Webkit. Tôi sẽ để bạn thử IE. : o)

Hãy dùng thử: http://jsfiddle.net/ScKbk/

Sau khi bạn nhấp để bắt đầu khoảng thời gian, hãy thay đổi tiêu điểm của cửa sổ trình duyệt để xem kết quả thay đổi. Một lần nữa, chỉ được thử nghiệm trong Webkit.

var window_focus;

$(window).focus(function() {
    window_focus = true;
}).blur(function() {
    window_focus = false;
});

$(document).one('click', function() {
    setInterval(function() {
        $('body').append('has focus? ' + window_focus + '<br>');
    }, 1000);
});​

sử dụng phương thức hasFocus của tài liệu. Bạn có thể tìm thấy mô tả chi tiết và một ví dụ ở đây: phương pháp hasFocus

CHỈNH SỬA: Đã thêm fiddle http://jsfiddle.net/Msjyv/3/

HTML

Currently <b id="status">without</b> focus...

JS

function check()
{
    if(document.hasFocus() == lastFocusStatus) return;

    lastFocusStatus = !lastFocusStatus;
    statusEl.innerText = lastFocusStatus ? 'with' : 'without';
}

window.statusEl = document.getElementById('status');
window.lastFocusStatus = document.hasFocus();

check();
setInterval(check, 200);

Đoạn mã javascript đơn giản

Sự kiện dựa trên:

function focuschange(fclass) {
    var elems=['textOut','textFocus'];
    for (var i=0;i<elems.length;i++) {
        document.getElementById(elems[i]).
            setAttribute('class',fclass);
    }
}
window.addEventListener("blur",function(){focuschange('havnt')});
window.addEventListener("focus",function(){focuschange('have')});
focuschange('havnt');

.have                { background:#CFC; }
#textOut.have:after  { content:'';      }
.havnt               { background:#FCC; }
#textOut.havnt:after { content:' not';  }

<span id='textOut'>Have</span><span id='textFocus'> focus</span>

Dựa trên nhóm khoảng thời gian:

setInterval(function() {
    var fclass='havnt';
    if (document.hasFocus()) {
      fclass='have';
    };
    var elems=['textOut','textFocus'];
    for (var i=0;i<elems.length;i++) {
        document.getElementById(elems[i]).
            setAttribute('class',fclass);
    }
},100);

#textOut.have:after  { content:'';     }
#textOut.havnt:after { content:' not'; }
.have  { background:#CFC; }
.havnt { background:#FCC; }

<span id='textOut'>Have</span><span id='textFocus'> focus</span>

HTML:

<button id="clear">clear log</button>
<div id="event"></div>​

Javascript:

$(function(){

    $hasFocus = false;

    $('#clear').bind('click', function() { $('#event').empty(); });

    $(window)
        .bind('focus', function(ev){
            $hasFocus = true;
            $('#event').append('<div>'+(new Date()).getTime()+' focus</div>');
        })
        .bind('blur', function(ev){
            $hasFocus = false;
            $('#event').append('<div>'+(new Date()).getTime()+' blur</div>');
        })
        .trigger('focus');

    setInterval(function() {
        $('#event').append('<div>'+(new Date()).getTime()+' has focus '+($hasFocus ? 'yes' : 'no')+'</div>');
    }, 1000);
});​

kiểm tra

CẬP NHẬT:

Tôi sẽ sửa nó, nhưng IE hoạt động không tốt

cập nhật thử nghiệm