PreventDefault () when pressing tab key inside textbox in Chrome

Question

I know that similar questions have been asked before, but the behavior that I see is slightly different from what I could find in SO.

I have a form that I split into several tabs of a jquery accordion. I want the user to be able to fill in the text box under tab 1 and then open the tab key to automatically open tab 2 and put focus on the text box on that tab. The problem I am facing is preventing default behavior for entering default keys 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 tested this in Chrome, FF and Safari. Works well in FF and Safari, but when a user who uses the Chrome keys resets the tab key, the actual tab is entered into the text box before the event fires. I would like to stop this behavior, but the tab is explicitly entered before the event even fires. Is there any way to stop this?

Answer 1

Turns out the problem was caused by jquery validation. I checked every text field on the form with this set of parameters:

 $("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, ... }; 

Once I set onfocusout: false , I was able to capture the keydown event for the tabs, as expected.

I have no idea why this is. There must be a bug in jquery accordion or jquery validate.