Auto Tab Fields
Streamline serial code entry. This logic automatically advances the user's cursor to the next box when they have filled the current one.
Enter Phone Number:
-
-
Copy the Script
<script>
function autoTab(current, nextFieldID) {
if (current.value.length >= current.maxLength) {
document.getElementById(nextFieldID).focus();
}
}
</script>
<input type="text" maxlength="3" onkeyup="autoTab(this, 'field2')">
<input type="text" id="field2" maxlength="3">Frequently Asked Questions
It checks the `value.length` against the `maxLength` attribute of the input field on every keyup event.
Basic versions do not reverse-tab on backspace. You would need additional logic to check for the 'Backspace' key code and move focus to the previous element.
It can be confusing for screen reader users or those who type quickly, as focus jumps unexpectedly. Use sparingly and ensure it doesn't break standard keyboard navigation.