Project 65, Forms and input

OTP Code Input

The code boxes you see after signing in. Typing, pasting and phone autofill all just work, and wrong codes get a clear message.

Main API: Input events
Autofill: one-time-code
Dependencies: None
Your browser: Checking

Enter the code

The demo code is 482915. Type it, paste it, or try a wrong one. Wait for the timer to resend.

We sent a 6 digit code to +44 7700 900123.

Didn't get it?

How it works

One digit per boxEach box takes one digit and moves focus to the next. Backspace on an empty box goes back and clears the previous digit.
Paste and autofillPasting or autofill can drop the whole code into one box. The script spreads the digits across all six.
Limit tries and waitThree wrong tries lock the boxes, and the resend link waits 30 seconds, like real sign in flows.

inputs.forEach((box, i) => {
  box.addEventListener("input", () => {
    const digits = box.value.replace(/\D/g, "");
    if (digits.length > 1) return spread(digits, i);   // pasted or autofilled
    box.value = digits;
    if (digits && i < inputs.length - 1) inputs[i + 1].focus();
  });
  box.addEventListener("keydown", (e) => {
    if (e.key === "Backspace" && !box.value && i > 0) inputs[i - 1].focus();
  });
});
// first box: <input autocomplete="one-time-code" inputmode="numeric">