자바스크립트 / jQuery:윈도우에 포커스가 있는지 테스트

자바스크립트 / jQuery:윈도우에 포커스가 있는지 테스트

브라우저에 포커스가 있는지 어떻게 테스트합니까?

문서의 hasFocus 메서드를 사용합니다.자세한 설명과 예는 hasFocus method를 참조할 수 있습니다.

편집: 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);

다른 브라우저에서 테스트해 본 적은 없지만 웹킷에서는 작동하는 것 같습니다.IE를 사용해 볼 수 있도록 하겠습니다. :o)

사용해 보십시오. http://jsfiddle.net/ScKbk/

클릭하여 간격을 시작한 후 브라우저 창의 포커스를 변경하면 결과가 변경됩니다.다시 말하지만, 웹킷에서만 테스트되었습니다.

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

간단한 자바스크립트 스니펫

이벤트 기반:

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>

간격 풀 기반:

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

자바스크립트:

$(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);
});​

시험

업데이트:

고쳐보겠지만 IE가 잘 안 되네요.

테스트 업데이트

언급URL : https://stackoverflow.com/questions/3479734/javascript-jquery-test-if-window-has-focus