When filling out a form, it’s a better user experience for the input fields to automatically select the next input field as the user is typing. This usually only works when the required input has a limit to the number of characters the user can enter. The best example is a phone number. With a United States phone number, there are typically 10 digits broken up into 3 sections known as the 3-3-4 scheme: area code, prefix, and the line number. A website form may require the area code to be separate from the rest of the number (prefix and the line number) as shown in the HTML code below.
(<input type="text">) <input type="text">
To enter a phone number, the user types the 3 character area code, then manually selects the next box to enter the remaining 7 numbers. If the user is a little tech-savvy, they may know to use the “tab” key on the keyboard to jump to the next input field. This may seem like a small burden for the user, but when it comes to increasing the odds of the user completing your contact form or an online application, it can be significant.
When asking your user to enter information into a form, you are asking them to do you a favor. Don’t lose sight of that. Make it as easy as possible for them. To help avoid small user input errors, add a limit to how many characters can be entered into the input field by using the HTML “input” element’s “maxlength” attribute. This will stop the user from entering their entire phone number in the area code field.
(<input type="text" maxlength="3">) <input type="text" maxlength="7">
Let’s take it a step further by removing the option of manually selecting the next input field to complete the phone number entry. Below is an “autotab” function written in JavaScript which will select the next input field after the maximum character length has been entered on the area code. This will allow the user to continually enter their number without interruption.
function autotab(current,to)
{
if (current.getAttribute && current.value.length==current.getAttribute("maxlength"))
{
to.focus()
}
}
To connect the script to the HTML input fields, you’ll want to execute the function on, add the “oninput” attribute to the “input” element you want to move away from after the maximum character length has been selected. Enter the “autotab” function as the value of “oninput.”
oninput="autotab(this, document.formName.inputName)"
There are two arguments in the function, “current” and “to.” The answers provided are “this,” which tells the browser to use the current HTML element that has been selected and “document.formName.inputName” which tells the browser to locate the HTML element that has a “name” attribute with the value of “inputName” that is a child of the HTML element that has a “name” attribute with the value of “formName.”
See it all together.
<script>
function autotab(current,to)
{
if (current.getAttribute && current.value.length==current.getAttribute("maxlength"))
{
to.focus()
}
}
</script>
<form name="formName">
(<input type="text" maxlength="3" oninput="autotab(this, document.formName.inputName)" >)
<input type="text" maxlength="7" name="inputName">
</form>
To summarize it, the “autotab” function will grab the value of the “maxlength” attribute of the input field selected (“this”). Once the value of the input field (what the user is typing in) reaches the same character length as the value of “maxlength” (in this case 3), the user is automatically pushed to the next input field by calling the “focus” function on the value of the “to” argument.