javascript - Changing browser tabs undesirably fires the focus event, especially in Google Chrome

I've got a little issue with the focus event that I just became aware of. Apparently, focus fires when switching to another browser tab and then back again. I'd rather not have that happen; is it possible?

I was never aware of this until today. Here's a little demo: /

var times = 0;
$('input').on('focus', function() {
    times ++;
    $(this).after('<br>Focused '+times+' times');   
});

To reproduce: Focus on the input, then switch browser tabs, then switch back. All browsers seem to fire the focus event when you switch back to the tab, and Google Chrome 19 is firing it twice!

Ideally, the function should not run when switching browser tabs at all but only on user click or Tab, but now that I'm aware of the Chrome issue I'm a bit more concerned about that because it's resulting in extra unwanted back-to-back AJAX requests in my real app (it's for fetching results for an autoplete that needs to be up to date, but not so much that I want to use the keyup event).

It doesn't seem jQuery related (I did test with vanilla javascript) but I can using jQuery for a solution. Is there anything I can do about this? I know I can use jQuery's one() but I do want the function to run more than once.

I was never aware of this until today. Here's a little demo: http://jsfiddle/MJ6qb/1/

var times = 0;
$('input').on('focus', function() {
    times ++;
    $(this).after('<br>Focused '+times+' times');   
});

To reproduce: Focus on the input, then switch browser tabs, then switch back. All browsers seem to fire the focus event when you switch back to the tab, and Google Chrome 19 is firing it twice!

Share Improve this question asked May 18, 2012 at 17:31 No Results Found 103k38 gold badges198 silver badges231 bronze badges

1 Slightly unrelated, but you might be able to detect when the browser tab is focused or blurred and override the default behavior like in this. The Chrome double-fire is a known bug, from what I can tell. – jeffjenx Commented May 18, 2012 at 17:41
Ah thanks for that, didn't realize it was a known bug, only found it while testing the code in Chrome just before posting to make sure it wasn't a FF thing (which I develop in). I kind of feel like giving up and "letting it ride" but it's really annoying. I'll see if I can do something with the code in that answer. – No Results Found Commented May 18, 2012 at 17:45
1 The behavior you are experiencing is expected. When you leave the tab, you are unfocusing that textbox and when you return you are focusing it again. The same goes for leaving to another application. Unfortunately, I cannot think of a way to override or get around this. – jeffjenx Commented May 18, 2012 at 17:46
As long as the blur event fires as well (which seems to be the case), I guess that makes sense - I just never realized it. – No Results Found Commented May 18, 2012 at 17:57

Add a ment |

2 Answers 2

Sorted by: Reset to default 9

Try this

var times = 0;
var prevActiveElement;

    $( window ).on( "blur", function(e){
            prevActiveElement = document.activeElement;
    });

    $('input').on('focus', function() {
        if (document.activeElement === prevActiveElement) {
            return;
        }
        prevActiveElement = document.activeElement;
        times++;
        $(this).after('<br>Focused ' + times + ' times');
    }).on( "blur", function(){
        prevActiveElement = null;  
    });

Try this to get around the problem:

var times = 0, foc=true;

$(window).on('focus', function() {
    foc = false;
    setTimeout(function() {foc=true}, 200);
});

$('input').on('focus', function() {
    if (foc || times===0) {
        times ++;
        $(this).after('<br>Focused '+times+' times');   
    }
});

FIDDLE

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Changing browser tabs undesirably fires the focus event, especially in Google Chrome - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)