I have code similar to the sample bellow. I click on the text-input field. I expect the to see "is focused: true".

$('input').focus(function(){
  var isFocused = $(this).is(':focus');
  console.log( "is focused: "+isFocused );
});

It works as expected in Firefox (is focused: true) but fails in Chrome (is focused: false).

I also the tried code bellow:

$('input').focus(function(){
  var isFocused = this === this.ownerDocument.activeElement;
  console.log( "is focused: "+isFocused );
});

This time I'm getting consistent result (is focused: true).

I do understand that clicking an input field in Chrome does not effect CSS :focus state. I also understand that ":focus" and ":active" are not the same. However, I believe that the behavior of jQuery ":focus" selector is broken in Chrome.

First, I believe that jQuery ":focus" selector should be analogous to jQuery .focus() function. They should work constantly across browsers. Second, look at line 4439-4441 from jQuery source file:

focus: function( elem ) {
      return elem === elem.ownerDocument.activeElement;
    }

Related bugs: http://bugs.jquery.com/ticket/7768

Thanks,

Rafal Radulski

rrafal@gmail.com