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?

Answer 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.