Problem with phone number fields

Problem with phone number fields

I'm sure I'm doing something wrong here, but I don't understand what, and would very much appreciate some assistance.

I have a page with phone numbers on it and the customer wants auto-tabbing between fields. This seems easy enough and what I've written works fine if the fields are empty and/or the user types slowly. But if the user types quickly (I type 123 on the keypad) on prefilled entries, the cursor has a tendency to jump OVER a field as opposed to into it. I've created a jsFiddle to recreate the problem:


Updated with simplifications recommended by jakecigar:

This seems to be independent of the browser. The intent of the code that ignores tabs, shift, etc (or more accurately, silently accepts them) is to allow for things like shift tab. However, it is not necessary code for reproducing the problem. It occurs with or without this bit of code.

Thanks in advance for any help you can give!