When a form author needs to capture data where there are several related fields with fixed numbers of characters, they should try to make the separate fields behave like one continuous field.
The best example I can think of is when I’m filling in a multi-part serial number. The number usually gets broken out into several input fields. As soon as one input field is full, you are automatically tabbed over to the next field. If you paste a long value into the first field, the pasted value is used to populate all the fields in the sequence.
Occasionally I run into a dialog box that prompts for a serial number but doesn’t give me the auto-tab and auto-paste-fill experience, and I get … angry. How dare they force me to transcribe a 15 digit number digit-by-digit?
Today’s example shows how to bring the auto-tab and auto-paste-fill experience to a PDF form. The sample form captures a social security number as a sequence of 3, 2 and 4 characters in 3 separate fields.
For the fields of the sequence to work in concert, the script needs to know three things:
a) How many characters are in each field
b) which fields participate in the sequence
c) What order are the fields in?
The sample does this by:
- Define each field in the sequence as a text field with a maximum number of characters (field.value.text.maxChars).
- Define a custom tab order. The next field is defined in the markup: field.traversal.traverse.ref
The sequence of fields could easily be defined in a different way. My alternate choice would be to wrap the fields of the sequence in a subform and assume that they are in document order.
When a user types or pastes, the change event fires. The change event checks for:
- If there’s more text than fits, spread the leftover text among the next fields in the sequence according to their maxChars capacity.
- If the user’s input has caused the field to reach its maxChars value, set focus to the next field in the sequence.
There’s more that could be done. The form could (and should) have tested the digits to make sure they’re valid for a social security number. On deleting the last character from a field the form could automatically tab to the previous field.
I won’t be blogging for a bit. I will be on vacation all next week. In the mean time, happy form designing.