I want to create a html (actually JSP, but I assume this is a html issue..) which has a field that lets user enter 10 digits phone number. However, I want to separate the field into 3 box. First box contains 3 digits, user can click tab after finishing the first box, it should automatically jump to the 2nd box which contains 3 digits, and the 3rd box contains 4 digits. I am sure we have all seen such forms. I need to take the hone number input as a whole string from my "<form>". How do people usually handle such trick ?
I rather dislike the three-box method and prefer a single box in which I let the user enter a free-form string of digits with whatever punctation they please. On input I simply strip out anything that's not a digit and verify that there are the 10 digits left.
To make the 3-box format "auto-tab" simply check the length of the input in a key event handler, and focus to the next input if it's "full".