I'm seeing this pattern appear more and more on consumer web sites that I have to interact with (e.g. my cellular company and the bank) and it's driving me insane.

I talking about input boxes that automatically move focus to the next box when you have entered enough letters and/or digits into them.

The most common use of this pattern is when entering phone numbers.

Assume (for the audience in the US) that there are three boxes - the first two accept three digits and the final box accepts four. Focus initially starts in the first box and then once you have entered three digits (e.g. 425) the focus automatically moves to the next box.

The problem occurs if you enter something incorrectly.

Say I incorrectly entered 426. Focus is now in the second box, and being a keyboard kinda guy I hit Shift-Tab to move to the previous box.

Ping pong!

As there where enough digits in the first box, focus moves forward again to the second box without giving me a chance to correct my mistake. On some sites, if I use the mouse and click back in the first box, the same ping pong problem occurs.

The only way out of the problem seems to be to double-click or drag-select to select all the text in the first box, and then the focus stays there allowing me to reenter everything.

I understand that the point of this pattern is to allow the user to type '4254669305' without having to click in each box, but it seems to me that the website designer just wanted a pretty page. Why not just have a single input box?

Does anyone else have this issue? Or am I just being pendantic :-)

Btw, Here's a website that shows you how to implement this bad pattern and exhibits the shift-tab problem that I describe above, though not the click problem.