05.21.05

Proper Auto Tabbing in Forms with JavaScript

Posted in General at 7 am

As part of a big project coming up, we’ve been asked (by the users! Hooray for users!) to implement an auto tab function for some of our forms. What is auto tabbing? When you are using a multiple input fields for a single piece of data that is split up into sections (such as phone numbers or dates or social security numbers (ssn’s) or other structured strings), the cursor should automatically jump forward or auto-tab to the next input field.

The scenario is when you type in three numbers for the area code of a North American phone number, the cursor should automagically go from the area code field to the three digit local exchange field. Again the cursor should jump forward to the text input for the line number once the three numbers are entered.

The intension here is to treat the autotab set as if it were a single input field. I’ve observed a number of interface elements and behaviors should be present:

* The input boxes should have a visual bounding box that shows they are linked together.
* Between the boxes should be all of the puncuation that would otherwise be typed in.
* When the auto-tab activates, a dramatic highlight around the next input field of the auto-tab set should be displayed. (preferably through CSS).
* When the user types a backspace delete and is at the start of the second or following input field, the cursor should be auto tabbed backwards to the previous field. (In the first field, the cursor should not move.) The last character of the previous field should also be removed.
* Similar functionality should hold for the left arrow key.
* The right arrow key should be available to move through the text that has already been typed. It should automatically advance to the next field unless the current field does not have the required number of characters.
* Optionally the tab key could be disabled for all but the first and last input fields. However the following behaviors must also be implemented.
* Power user scenario: When a user types in the first field and is autotabbed to the second, they may not be watching the screen and may hit the tab key expecting a ‘dumb’ input field set. Instead of forwarding the cursor to the third field the cursor should remain in the second field.
* Multiple tab scenario: If, however, a user types tab multiple times in a number equal to the number of fields remaining in the auto-tab set, the cursor should be advanced to the next form input following the auto-tab set.
* Final field tab scenario: If the user types tab when the cursor is in the last field of an auto-tab set, the cursor should be advanced to the form element following the auto-tab set.

Some of these behaviors may change if the auto-tab set already has existing data in it. The circumstances and the resulting behavior will vary depending on the context of the auto-tab set.

Again, the intension here is to treat the autotab set as if it were a single input field and to not interfere with power users’ understanding of what to type when they are not looking at the screen.

And finally, if these behaviors are to be implemented, they must be implemented for all forms that can use it and the visual indication of the auto-tab input set must remain consistent throughout the site.

If you or a project you have worked on has implemented these behaviors, please let me know so that this can be shared with others. I would love to see a .js file that can be called to generate the auto-tab set’s behaviors simply by IDing, CLASSing or NAMEing the individual field of the auto-tab set.

Additional notes:

Autotab examples (incomplete in regards to the items noted above):

* http://www.rgagnon.com/jsdetails/js-0113.html
* http://www.mattkruse.com/javascript/autotab/
* http://javascript.internet.com/forms/auto-tab.html

From Internet.com:

* Require specific fields: /forms/no-entry.html
* General form validator: /forms/tigra-form-validator.html
* Return triggers a tab: /forms/tab-key-emulation.html

Keycapture (for the Delete Key) Note from FAQTS.com:

* /aid/11802
* /aid/1189/fid/145
* /aid/5482/fid/145
* /aid/1350/fid/145

Previous entry on “straight jacketing” the user’s Input fields:

* /dwelling/2005/03/form-and-field-validation/

Comments are closed.

RSS feed for comments on this post · TrackBack URL