首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JavaScript / jQuery:测试窗口是否具有焦点

JavaScript / jQuery:测试窗口是否具有焦点
EN

Stack Overflow用户
提问于 2010-08-14 02:36:48
回答 2查看 93.8K关注 0票数 82

如何测试浏览器是否具有焦点?

EN

回答 2

Stack Overflow用户

发布于 2018-10-16 00:00:09

简单的javascript代码片段

基于事件:

代码语言:javascript
复制
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');
代码语言:javascript
复制
.have                { background:#CFC; }
#textOut.have:after  { content:'';      }
.havnt               { background:#FCC; }
#textOut.havnt:after { content:' not';  }
代码语言:javascript
复制
<span id='textOut'>Have</span><span id='textFocus'> focus</span>

基于间隔池的:

代码语言:javascript
复制
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);
代码语言:javascript
复制
#textOut.have:after  { content:'';     }
#textOut.havnt:after { content:' not'; }
.have  { background:#CFC; }
.havnt { background:#FCC; }
代码语言:javascript
复制
<span id='textOut'>Have</span><span id='textFocus'> focus</span>

票数 3
EN

Stack Overflow用户

发布于 2010-08-14 05:05:56

HTML:

代码语言:javascript
复制
<button id="clear">clear log</button>
<div id="event"></div>​

Javascript:

代码语言: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

更新:

我会修复它的,但是IE不能很好地工作

test update

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3479734

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档