JavaScript / jQuery: Testen Sie, ob das Fenster den Fokus hat

Question 1

Wie testen Sie, ob der Browser den Fokus hat?

Question 2

Ich habe dies nicht in anderen Browsern getestet, aber es scheint in Webkit zu funktionieren. Ich lasse Sie IE versuchen. :Ö)

Probieren Sie es aus: http://jsfiddle.net/ScKbk/

Ändern Sie nach dem Klicken zum Starten des Intervalls den Fokus des Browserfensters, um die Ergebnisänderung anzuzeigen. Wieder nur in Webkit getestet.

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

Question 3

Verwenden Sie die hasFocus-Methode des Dokuments. Eine ausführliche Beschreibung und ein Beispiel finden Sie hier: hasFocus-Methode

BEARBEITEN: Geige hinzugefügt 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);

Question 4

Einfaches Javascript-Snippet

Ereignisbasiert:

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>

Erweitern Sie das Snippet

Intervallpoolbasiert:

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>

Erweitern Sie das Snippet

Question 5

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

Prüfung

AKTUALISIEREN:

Ich werde es beheben, aber IE funktioniert nicht sehr gut

Test Update

Answer 1

80

Wie testen Sie, ob der Browser den Fokus hat?

javascript jquery events Stange
quelle

Siehe auch stackoverflow.com/questions/483741/…, das auch diese Frage beantworten kann.

Alexander Bird

15

Try document.hasFocus(), das einen Booleschen Wert zurückgibt. Es ist in die Spezifikation integriert, sodass es ohne jQuery ausgeführt werden kann.

Braden Best

Für jemanden, der die Sichtbarkeit von Seiten überprüfen möchte (was nicht mit dem Fokus identisch ist), überprüfen Sie bitte die API für die Sichtbarkeit von Seiten, um weitere Informationen zu erhalten.

tsh

Answer 2

Siehe auch stackoverflow.com/questions/483741/…, das auch diese Frage beantworten kann.

Alexander Bird

Answer 3

15

Try document.hasFocus(), das einen Booleschen Wert zurückgibt. Es ist in die Spezifikation integriert, sodass es ohne jQuery ausgeführt werden kann.

Braden Best

Answer 4

Für jemanden, der die Sichtbarkeit von Seiten überprüfen möchte (was nicht mit dem Fokus identisch ist), überprüfen Sie bitte die API für die Sichtbarkeit von Seiten, um weitere Informationen zu erhalten.

tsh

Answer 5

79

Ich habe dies nicht in anderen Browsern getestet, aber es scheint in Webkit zu funktionieren. Ich lasse Sie IE versuchen. :Ö)

Probieren Sie es aus: http://jsfiddle.net/ScKbk/

Ändern Sie nach dem Klicken zum Starten des Intervalls den Fokus des Browserfensters, um die Ergebnisänderung anzuzeigen. Wieder nur in Webkit getestet.

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

user113716
quelle

@jball - Muss IE sein? In Webkit und Firefox löst jede Aktivierung des Fensters den Fokus aus. Ich frage mich, ob es eine Problemumgehung für IE gibt. Haben Sie auch auf Ihrer Seite getestet? Vielleicht gibt es ein Problem, weil die jsFiddle Frames verwendet?

user113716

Chrome eigentlich. Nach weiteren Tests könnte mein erster Kommentar falsch sein - die Tabulatortaste scheint konsistenter zu sein.

Jball

@jball - Ich vermute, dass die Tabulatortaste es kaputt macht, weil jsFiddle viele Eingabeelemente in anderen Frames hat. Werde die Frames los und ich wette, es wird ein bisschen besser für dich funktionieren.

user113716

Ich glaube, jeder Frame hat sein eigenes windowObjekt. Wenn Sie also Frames verwenden würden, müssten Sie wahrscheinlich nur das Skript in jeden einfügen.

user113716

4

Verwenden window.topSie diese Option, um das oberste Fenster zu überprüfen.

Mårten Wikström

Answer 6

@jball - Muss IE sein? In Webkit und Firefox löst jede Aktivierung des Fensters den Fokus aus. Ich frage mich, ob es eine Problemumgehung für IE gibt. Haben Sie auch auf Ihrer Seite getestet? Vielleicht gibt es ein Problem, weil die jsFiddle Frames verwendet?

user113716

Answer 7

Chrome eigentlich. Nach weiteren Tests könnte mein erster Kommentar falsch sein - die Tabulatortaste scheint konsistenter zu sein.

Jball

Answer 8

@jball - Ich vermute, dass die Tabulatortaste es kaputt macht, weil jsFiddle viele Eingabeelemente in anderen Frames hat. Werde die Frames los und ich wette, es wird ein bisschen besser für dich funktionieren.

user113716

Answer 9

Ich glaube, jeder Frame hat sein eigenes windowObjekt. Wenn Sie also Frames verwenden würden, müssten Sie wahrscheinlich nur das Skript in jeden einfügen.

user113716

Answer 10

4

Verwenden window.topSie diese Option, um das oberste Fenster zu überprüfen.

Mårten Wikström

Answer 11

160

Verwenden Sie die hasFocus-Methode des Dokuments. Eine ausführliche Beschreibung und ein Beispiel finden Sie hier: hasFocus-Methode

BEARBEITEN: Geige hinzugefügt 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);

Kaugummi
quelle

3

Ich habe das Beispiel über den obigen Link ausprobiert und es hat in IE7 +, Chrome und FF4 gut funktioniert. +1 für dich.

Joseph Lust

1

Tolle kleine Funktion, funktioniert viel besser als andere jQuery-Äquivalente, auf die ich gestoßen bin.

Heath

3

Nützlicher als die akzeptierte Antwort: Ich hatte Probleme mit dem Laden des Timers, während das Fenster unscharf war.

Kokos

Dies wird von Opera nicht unterstützt. Die beruhigende Tatsache ist, dass sie gerade dabei sind, die Rendering-Engine auf Webkit

umzustellen

6

In der Zwischenzeit können Sie so etwas verwenden, um die Funktionalität in Opera zu erhalten:

if(typeof document.hasFocus === 'undefined') { 	document.hasFocus = function () { 		return document.visibilityState == 'visible'; 	}	 }

Kent

Answer 12

3

Ich habe das Beispiel über den obigen Link ausprobiert und es hat in IE7 +, Chrome und FF4 gut funktioniert. +1 für dich.

Joseph Lust

Answer 13

1

Tolle kleine Funktion, funktioniert viel besser als andere jQuery-Äquivalente, auf die ich gestoßen bin.

Heath

Answer 14

3

Nützlicher als die akzeptierte Antwort: Ich hatte Probleme mit dem Laden des Timers, während das Fenster unscharf war.

Kokos

Answer 15

Dies wird von Opera nicht unterstützt. Die beruhigende Tatsache ist, dass sie gerade dabei sind, die Rendering-Engine auf Webkit

umzustellen

Answer 16

6

In der Zwischenzeit können Sie so etwas verwenden, um die Funktionalität in Opera zu erhalten:

if(typeof document.hasFocus === 'undefined') { 	document.hasFocus = function () { 		return document.visibilityState == 'visible'; 	}	 }

Kent

Answer 17

Einfaches Javascript-Snippet

Ereignisbasiert:

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>

Erweitern Sie das Snippet

Intervallpoolbasiert:

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>

Erweitern Sie das Snippet

Answer 18

Ich mag diese Antwort wegen der ereignisbasierten Lösung . Imho, es sollte immer der bevorzugte Weg sein.

quasi

Answer 19

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

Prüfung

AKTUALISIEREN:

Ich werde es beheben, aber IE funktioniert nicht sehr gut

Test Update

Answer 20

Anscheinend wird beim Wechseln der Registerkarten keine Unschärfe ausgelöst. :(

Jethro Larson

JavaScript / jQuery: Testen Sie, ob das Fenster den Fokus hat

Antworten:

Einfaches Javascript-Snippet

Ereignisbasiert:

Intervallpoolbasiert: