10.8. Autotabbing Based on Character Count

10.8.1. Problem

You have a form for allowing users to register a product online, and you require the user to enter a serial number printed on the installation discs. This number is 16 digits long and separated across four input fields. Ideally, to speed the user along in their data entry, as each input field is filled up, you’d like to automatically focus the next input field until they’re finished typing the number:

<fieldset class="autotab">
    <legend>Product Serial Number</legend>
    <input type="text" maxlength="4" />
    <input type="text" maxlength="4" />
    <input type="text" maxlength="4" />
    <input type="text" maxlength="4" />
</fieldset>