preventDefault() when a tab key is clicked inside of a textarea in Chrome

Question

I know that similar questions have been asked before, but the behavior I'm seeing is a little different than what I've been able to find on SO.

I have a form that I'm breaking-up into several jquery accordion tabs. I want the user to be able to fill-out a textfield under tab 1, and then keydown the tab key to automatically open tab 2 and put focus on the textfield in that tab. The problem I'm having is preventing the default tab keydown behavior in Chrome.

$("form#new_story").keydown(function (e) {
    if(!e) var e = window.event;
    var keyCode = e.keyCode || e.which; 
    if (keyCode == 9) {
        e.preventDefault();
        alert("tab was keyed");
    }
});

I've tested this in Chrome, FF and Safari. Works well in FF and Safari, but when a user who is using Chrome keys down the tab key, an actual tab is entered into the textfield prior to the event triggering. I would like to stop this behavior, but the tab is clearly being entered before the event even triggers. Is there a way to stop this?

Answer 1

Turns out that the problem was triggered by jquery validate. I was validating each text field in the form with this set of options:

$("form#new_story").validate({
                      ignore: [],
                      onkeyup: false,  //stop eager validation of fields so to not hit server each time user clicks a key in the email field
                      onfocusout: true,
                      ...
                    };

As soon as I set onfocusout: false I was able to capture the tab keydown event as expected.

I have no idea why this would be the case. Must be a bug in either jquery accordion or jquery validate.