Detect focus initiated by tab key?

Question

I want to detect the focus event of an element, but only if it was initiated by the user pressing the tab key. For example:

<input type="text" id="foo" /> <input type="text" id="detect" /> 

If the user is focused on #foo and presses Tab, I want the event to fire once #detect becomes focused (or a conditional inside the focus event to be true). Conversely, if the user simply clicks on the #detect field to focus it, I do not want the event to fire (or I want the conditional inside the focus event call to be false).

I don't want to use the keydown event of #foo and check if the tab key was pressed, as I want the approach to be independent of any other element.

I looked through the console output of the following code, but couldn't notice any real differences between the two methods of focusing:

$('#detect').on('focus', function(e){    console.log(e);  }); 

(fiddle)

Is this possible to accomplish in a relatively simple way?

Answer 1

I know you have accepted an answer but you could test the button pressed using the following:

$('#detect').on('focus', function(e){     $(window).keyup(function (e) {         var code = (e.keyCode ? e.keyCode : e.which);         if (code == 9) {            alert('I was tabbed!');         }     }); }); 

http://jsfiddle.net/LPGLm/1/

Edit: change the listener around:

$(window).keyup(function (e) {     var code = (e.keyCode ? e.keyCode : e.which);     if (code == 9 && $('#detect:focus').length) {         alert('I was tabbed!');     } }); 

http://jsfiddle.net/LPGLm/7/

Answer 2

A more responsive solution would be to use two listeners:

var mousedown = false; $('#detect').on('mousedown', function () {     mousedown = true; });  $('#detect').on('focusin', function () {     if(!mousedown) {         // logic     }     mousedown = false; }); 

Fiddle showing the difference in speed:

http://jsfiddle.net/u2y45/1/