JavaScript / jQuery: sprawdź, czy fokus ma okno

Question 1

Jak sprawdzić, czy przeglądarka ma fokus?

Question 2

Nie testowałem tego w innych przeglądarkach, ale wydaje się, że działa w Webkit. Pozwolę ci wypróbować IE. : o)

Wypróbuj: http://jsfiddle.net/ScKbk/

Po kliknięciu, aby rozpocząć interwał, zmień fokus okna przeglądarki, aby zobaczyć zmianę wyniku. Ponownie przetestowany tylko w Webkicie.

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

użyj metody hasFocus dokumentu. Szczegółowy opis i przykład można znaleźć tutaj: metoda hasFocus

EDYCJA: Dodano skrzypce 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

Prosty fragment kodu JavaScript

Na podstawie wydarzenia:

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>

Rozwiń fragment

Na podstawie puli interwałowej:

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>

Rozwiń fragment

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

test

AKTUALIZACJA:

Naprawię to, ale IE nie działa zbyt dobrze

aktualizacja testowa

Answer 1

80

Jak sprawdzić, czy przeglądarka ma fokus?

javascript jquery events Pręt
źródło

Zobacz także stackoverflow.com/questions/483741/…, które również mogą odpowiedzieć na to pytanie.

Alexander Bird

15

Try document.hasFocus(), która zwraca wartość logiczną. Jest wbudowany w specyfikację, więc można to zrobić bez jQuery.

Braden Best

Dla kogoś, kto chce sprawdzić widoczność stron (która nie jest tym samym, co fokus), sprawdź interfejs API widoczności strony, aby uzyskać więcej informacji.

tsh

Answer 2

Zobacz także stackoverflow.com/questions/483741/…, które również mogą odpowiedzieć na to pytanie.

Alexander Bird

Answer 3

15

Try document.hasFocus(), która zwraca wartość logiczną. Jest wbudowany w specyfikację, więc można to zrobić bez jQuery.

Braden Best

Answer 4

Dla kogoś, kto chce sprawdzić widoczność stron (która nie jest tym samym, co fokus), sprawdź interfejs API widoczności strony, aby uzyskać więcej informacji.

tsh

Answer 5

79

Nie testowałem tego w innych przeglądarkach, ale wydaje się, że działa w Webkit. Pozwolę ci wypróbować IE. : o)

Wypróbuj: http://jsfiddle.net/ScKbk/

Po kliknięciu, aby rozpocząć interwał, zmień fokus okna przeglądarki, aby zobaczyć zmianę wyniku. Ponownie przetestowany tylko w Webkicie.

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
źródło

@jball - czy musi to być IE? W Webkit i Firefox każda aktywacja okna wyzwala fokus. Zastanawiam się, czy istnieje obejście dla IE. Czy testowałeś też swoją stronę? Może pojawił się problem, ponieważ jsFiddle używa ramek?

user113716

Właściwie Chrome. Po dalszych testach mój pierwszy komentarz może być błędny - złamanie klawisza tabulacji wydaje się być bardziej spójne.

jball

@jball - zgaduję, że klawisz tabulatora go psuje, ponieważ jsFiddle ma wiele elementów wejściowych w innych ramkach. Pozbądź się ramek, a założę się, że zadziała trochę lepiej.

user113716

Uważam, że każda ramka ma swój własny windowobiekt, więc jeśli miałbyś używać ramek, prawdopodobnie musiałbyś po prostu dołączyć skrypt do każdej z nich.

user113716

4

Służy window.topdo sprawdzania najwyższego okna.

Mårten Wikström

Answer 6

@jball - czy musi to być IE? W Webkit i Firefox każda aktywacja okna wyzwala fokus. Zastanawiam się, czy istnieje obejście dla IE. Czy testowałeś też swoją stronę? Może pojawił się problem, ponieważ jsFiddle używa ramek?

user113716

Answer 7

Właściwie Chrome. Po dalszych testach mój pierwszy komentarz może być błędny - złamanie klawisza tabulacji wydaje się być bardziej spójne.

jball

Answer 8

@jball - zgaduję, że klawisz tabulatora go psuje, ponieważ jsFiddle ma wiele elementów wejściowych w innych ramkach. Pozbądź się ramek, a założę się, że zadziała trochę lepiej.

user113716

Answer 9

Uważam, że każda ramka ma swój własny windowobiekt, więc jeśli miałbyś używać ramek, prawdopodobnie musiałbyś po prostu dołączyć skrypt do każdej z nich.

user113716

Answer 10

4

Służy window.topdo sprawdzania najwyższego okna.

Mårten Wikström

Answer 11

160

użyj metody hasFocus dokumentu. Szczegółowy opis i przykład można znaleźć tutaj: metoda hasFocus

EDYCJA: Dodano skrzypce 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);

guma
źródło

3

Wypróbowałem przykład z powyższego linku i działał dobrze w IE7 +, Chrome i FF4. +1 dla Ciebie.

Joseph Lust

1

Świetna mała funkcja, działa znacznie lepiej niż inne odpowiedniki jQuery, z którymi się spotkałem.

Heath

3

Bardziej użyteczna niż zaakceptowana odpowiedź, miałem problemy z ładowaniem timera, gdy okno było nieostre.

Kokos

Nie jest to obsługiwane przez Operę. Uspokajający jest fakt, że są w trakcie przełączania silnika renderującego na Webkit :)

Nikola Petkanski

6

W międzyczasie możesz użyć czegoś takiego, aby uzyskać funkcjonalność w Operze:

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

Kent

Answer 12

3

Wypróbowałem przykład z powyższego linku i działał dobrze w IE7 +, Chrome i FF4. +1 dla Ciebie.

Joseph Lust

Answer 13

1

Świetna mała funkcja, działa znacznie lepiej niż inne odpowiedniki jQuery, z którymi się spotkałem.

Heath

Answer 14

3

Bardziej użyteczna niż zaakceptowana odpowiedź, miałem problemy z ładowaniem timera, gdy okno było nieostre.

Kokos

Answer 15

Nie jest to obsługiwane przez Operę. Uspokajający jest fakt, że są w trakcie przełączania silnika renderującego na Webkit :)

Nikola Petkanski

Answer 16

6

W międzyczasie możesz użyć czegoś takiego, aby uzyskać funkcjonalność w Operze:

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

Kent

Answer 17

Prosty fragment kodu JavaScript

Na podstawie wydarzenia:

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>

Rozwiń fragment

Na podstawie puli interwałowej:

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>

Rozwiń fragment

Answer 18

Podoba mi się ta odpowiedź ze względu na rozwiązanie oparte na zdarzeniach . Imho, zawsze powinien być preferowany sposób.

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

test

AKTUALIZACJA:

Naprawię to, ale IE nie działa zbyt dobrze

aktualizacja testowa

Answer 20

Najwyraźniej rozmycie nie uruchamia się podczas przełączania kart. :(

Jethro Larson

JavaScript / jQuery: sprawdź, czy fokus ma okno

Odpowiedzi:

Prosty fragment kodu JavaScript

Na podstawie wydarzenia:

Na podstawie puli interwałowej: