jQuery: How to capture the TAB keypress within a Textbox

Question

I want to capture the TAB keypress, cancel the default action and call my own javascript function.

score 261 · Accepted Answer · edited Aug 06 '13 at 20:51

261

Edit: Since your element is dynamically inserted, you have to use delegated on() as in your example, but you should bind it to the keydown event, because as @Marc comments, in IE the keypress event doesn't capture non-character keys:

$("#parentOfTextbox").on('keydown', '#textbox', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    // call custom function here
  } 
});

Check an example here.

edited Aug 06 '13 at 20:51

saluce

13,035
3
50
67

answered Aug 21 '09 at 22:28

Christian C. Salvadó

807,428
183
922
838

when I push TAB in IE6+ the event does not fire (it fires on any alphanumeric key though)... I need to use .live('keypress', fn) – Jon Erickson Aug 21 '09 at 22:55
If only works with live, maybe you are inserting your textbox element dynamically, if the element is already on the page, it will work, check this example: http://jsbin.com/oguhe – Christian C. Salvadó Aug 21 '09 at 23:01
yea the textbox is dynamically inserted. my example with id #textbox was just to simplify the question =) – Jon Erickson Aug 21 '09 at 23:29
@Jon, the reason you aren't using $(selector).live("keydown", fn) is ? CMS is suggesting using keydown because in IE, keypress does not work for noncharacter keys, (such as Tab) – Marc Aug 22 '09 at 00:58
keydown does not work in Opera. You have to use: $('textarea').bind($.browser.opera ? 'keypress' : 'keydown', function() {}); – Bald Dec 29 '10 at 08:28
5

@AppleGrew: it says so, yes, but it's not true - at least for keypress. For Tab e.which is 0 and e.keyCode is 9 (as it should be). Tested in FF 3.5.16, jQuery 1.6.2. – johndodo Oct 07 '11 at 10:20
I suggest delegated event rather than live, live can be very slow – Chris Stephens May 25 '12 at 20:00
live is depreciated in newer jquery versions and you should not use it. If you were to stumble on this then use the other answer using `.on` – HMR Jun 22 '13 at 11:55
a good example for TAB, SHIFT+TAB, and ENTER key is here http://jsbin.com/fecoyefaho/edit?html,js,output – Keshan Fernando Oct 14 '17 at 15:39
plus one for var keyCode = e.keyCode || e.which; – Leandro Bardelli Dec 06 '20 at 23:16

score 21 · Answer 2 · answered Mar 14 '13 at 13:20

21

Working example in jQuery 1.9:

$('body').on('keydown', '#textbox', function(e) {
    if (e.which == 9) {
        e.preventDefault();
        // do your code
    }
});

answered Mar 14 '13 at 13:20

Buzogany Laszlo

921
11
19

2

make `e.preventDefault();` double to prevent inserting whitespace into textbox. – stil May 27 '13 at 14:29

Jon Erickson · Answer 3 · 2009-08-21T22:41:27.727

12

$('#textbox').live('keypress', function(e) {
    if (e.keyCode === 9) {
        e.preventDefault();
        // do work
    }
});

edited Aug 21 '09 at 22:41

answered Aug 21 '09 at 22:23

Jon Erickson

112,242
44
136
174

2

Also, to cancel the default action, use e.preventDefault(); in the first line of the function. – Josh Leitzel Aug 21 '09 at 22:26
@Jon, keypress doesn't capture noncharacter keys in IE – Marc Aug 21 '09 at 22:34
@Marc I see that, how can I be compatible with IE and FF? – Jon Erickson Aug 21 '09 at 22:42
4

^^ The irony... jQuery is supposed to bridge the gap between broswers, so that you don't have to worry about stuff like this. – Jagd Aug 21 '09 at 22:57
@Jagd, jQuery can't infer intent. keypress and keydown are not equivalent for good reason. It just so happens, this situation does not require the distinction. – Marc Aug 21 '09 at 23:20

score 7 · Answer 4 · answered Oct 26 '13 at 08:50

Above shown methods did not work for me, may be i am using bit old jquery, then finally the below shown code snippet works for - posting just in case somebody in my same position

$('#textBox').live('keydown', function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
        alert('tab');
    }
});

score 5 · Answer 5 · answered Jul 23 '14 at 17:24

An important part of using a key down on tab is knowing that tab will always try to do something already, don't forget to "return false" at the end.

Here is what I did. I have a function that runs on .blur and a function that swaps where my form focus is. Basically it adds an input to the end of the form and goes there while running calculations on blur.

$(this).children('input[type=text]').blur(timeEntered).keydown(function (e) {
        var code = e.keyCode || e.which;
        if (code == "9") {
            window.tabPressed = true;
            // Here is the external function you want to call, let your external
            // function handle all your custom code, then return false to
            // prevent the tab button from doing whatever it would naturally do.
            focusShift($(this));
            return false;
        } else {
            window.tabPressed = false;
        }
        // This is the code i want to execute, it might be different than yours
        function focusShift(trigger) {
            var focalPoint = false;
            if (tabPressed == true) {
                console.log($(trigger).parents("td").next("td"));
                focalPoint = $(trigger).parents("td").next("td");

            }
            if (focalPoint) {
                $(focalPoint).trigger("click");
            }
        }
    });

score 4 · Answer 6 · edited Nov 05 '15 at 01:04

4

Try this:

$('#contra').focusout(function (){
    $('#btnPassword').focus();
});

edited Nov 05 '15 at 01:04

The_Black_Smurf

5,178
14
52
78

answered Nov 04 '15 at 18:44

Carlos

41
1

score 1 · Answer 7 · answered Sep 23 '16 at 09:06

1

Suppose you have TextBox with Id txtName

$("[id*=txtName]").on('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 9) {
     e.preventDefault();
     alert('Tab Pressed');
 }
});

answered Sep 23 '16 at 09:06

UJS

853
1
10
16

score 1 · Answer 8 · answered Aug 16 '18 at 20:46

1

You can capture an event tab using this JQuery API.

$( "#yourInputTextId" ).keydown(function(evt) {
   if(evt.key === "Tab")
      //call your function
});

answered Aug 16 '18 at 20:46

heronsanches

524
7
12

it works for me after adding evt.preventDefault(); in the if – LowFieldTheory Sep 27 '18 at 09:37

score -1 · Answer 9 · edited Oct 03 '19 at 12:32

-1

This worked for me:

$("[id*=txtName]").on('keydown', function(e) { var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); alert('Tab Pressed'); } });

edited Oct 03 '19 at 12:32

Todd

1,770
1
17
42

answered Oct 03 '19 at 10:58

Ventas Uruguay

1

jQuery: How to capture the TAB keypress within a Textbox

9 Answers9

Linked