Override Default Tabbing Navigation

Question

I am trying to use jquery to override the default tabbing navigation. I cannot simply use the tabindex property because I am trying to get the tab key to navigate from a text input to a virtualized textbox (codemirror). I have been trying to use the following javascript/jquery to no avail:

$('#modelName').focus(function() { 
    $(this).keydown( function(event) {
        if(event.keyCode=='9') {
            codeMirror.focus();
        }
    });
});

Any thoughts on how to make this work?

Try `event.which` instead of keyCode. – Fabrício Matté May 24 '12 at 05:09 — Fabrício Matté, May 24 '12 at 05:09
`event.which === 9` no quotes. jQuery normalizes `which` – elclanrs May 24 '12 at 05:13 — elclanrs, May 24 '12 at 05:13

ahren · Accepted Answer · 2012-05-24T05:16:48.633

1

  $('#modelName').keydown( function(event) {
    if(event.keyCode == 9) {
        event.preventDefault();
        codeMirror.focus();
    }else{
        alert("Not the right key! " + event.keyCode);   
    }
  });

It's good to have a catch, just so you can see where you're going wrong. In this case, I think it's string vs int.

Also, the way your code is, you would be applying a new keydown event handler each time the #modelName gets focus, without removing the old one. Would likely cause problems later.

edited May 24 '12 at 05:16

answered May 24 '12 at 05:11

ahren

16,803
5
50
70

Thanks for the help! The event.preventDefault() did it. – Brian Peacock May 24 '12 at 05:22
If my answer fixed it, and you're happy, then keep the community going by accepting this as your answer. Thanks. – ahren May 24 '12 at 05:23
Sorry, it told me to wait a minute and I forgot to come back to it. – Brian Peacock May 24 '12 at 10:59

score 0 · Answer 2 · answered May 24 '12 at 05:15

0

try this

$('#modelName').keyup(function (e) {
    if(e.keyCode== 9){
    codeMirror.focus();
    }
});

use keyup() instead of keydown()

answered May 24 '12 at 05:15

Valli69

8,856
4
23
29

`keydown` would feel more right if you were trying to mimic general tab behaviour. Also, `keyCode` 27 is the `esc` key... – ahren May 24 '12 at 05:19

Override Default Tabbing Navigation

2 Answers2