Detect Tab Key event on textbox on focus

Question

I have a autocomplete textbox in a form and I want to detect whether user has focussed on the textbox from navigating through tab key press.I mean tabindex has been set up on different form fields and user can navigate fields by pressing tabs.Now I want to perform some action when user directly mouse click/foxus on the textbox and some other action when user has focussed on the textbox through tab.

Below is the code I was trying.But no matter everytime code is 0.

$('#tbprofession').on('focus', function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 9) {
            alert('Tabbed');
        }
        else 
        {
            alert('Not tabbed');
        }
});

This code does not work.

Note:Before marking duplicate it will be good if you understand the question correctly.Else I can make it more clear with more elaborated description.

Anyone can show me some light?

Um... why do you think that `focus` event have `keyCode` property...? — Michał Perłakowski, May 24 '16 at 11:59
Possible duplicate of [Detect focus initiated by tab key?](http://stackoverflow.com/questions/16144611/detect-focus-initiated-by-tab-key) — M_T, May 24 '16 at 12:01
I know that's why if you notice there is an OR condition.Also I will need to determine it on `focus` — Navoneel Talukdar, May 24 '16 at 12:01

score 4 · Answer 1 · answered May 24 '16 at 11:58

4

You can try something like that :

$(document).on("keyup", function(e) {
  if ($('#tbprofession').is(":focus")) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 9) {
      alert('I was tabbed!');
    } else {
      alert('not tabbed');
    }
  }
});

fiddle : https://jsfiddle.net/xc847mrp/

answered May 24 '16 at 11:58

Quentin Roger

6,410
2
23
36

this does not work when second time user click inside the text field. – Navoneel Talukdar May 24 '16 at 17:07

Jai · Answer 2 · 2016-05-24T12:08:09.167

4

You can use keyup event instead:

$('#tbprofession').on('keyup', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 9) {
    console.log('I was tabbed!', code);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autofocus>
<input id='tbprofession'>

edited May 24 '16 at 12:08

answered May 24 '16 at 12:01

Jai

74,255
12
74
103

@Gothdo You are right just felt i thought too much. instead keyup event will do. – Jai May 24 '16 at 12:12
this does not work.If you dont mind I have edited my question with clarity. – Navoneel Talukdar May 24 '16 at 17:06

score 0 · Answer 3 · answered May 24 '16 at 11:58

You could have an array of key events triggered anytime a user presses a key while on your page. Although this makes you think of a keylogger. Or just keep the last key. Or a boolean saying if the last key pressed was a TAB or not.

And on focus you can look at that variable.

Detect Tab Key event on textbox on focus

3 Answers3