Create the verification code input used for two-factor and email codes: one box per character, automatic focus moves, paste of the whole code and the one-time-code autofill hint.
Runs entirely in your browser. Nothing is uploaded to any server.
Separate boxes show exactly how many characters are left.
Paste the full code or accept SMS autofill in one step.
Backspace, arrows and auto-advance feel natural.
The first box has autocomplete="one-time-code", which lets iOS and Android offer the code from an SMS. Because autofill and paste can drop several characters into one box, the script spreads them across the boxes starting from the current one.
Digit-only codes use inputmode="numeric" so phones show a number pad, while still using type="text" so leading zeros are kept. A hidden input called code always holds the joined value for normal form submission.
Backspace in an empty box clears and focuses the previous one.
Listen for it to verify the code as soon as it is entered.
Use password boxes when the code should not be shown on screen.
Yes. The first box carries the one-time-code hint and the script spreads the autofilled code across all boxes.
Read the hidden input named code, or listen for the otp-complete event whose detail is the full code.
Number inputs drop leading zeros, show spinners and allow characters like e, so type="text" with inputmode="numeric" is the better choice.
Yes. Pasting into any box fills from that box onwards and ignores spaces or dashes.
The boxes are grouped in a fieldset with a legend, and each box has a label such as "Character 2 of 6". Status messages use aria-live.
More free tools from My Panda Toolbox.