OTP Input (One-Time Code) new 验证码输入框 OTP Input（一次性代码） web
A segmented field for entering a short verification code
用于输入短验证码的分段式输入框
Paste a code or type each digit.
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Code slots代码格
input slotsThe individual boxes that show each digit or character of the code.
显示验证码中每个数字或字符的独立小格。
Prompt fragmentPrompt 片段six equal code slots with tabular numerals and a visible caret in the active slot
六个等宽数字代码格，当前格显示清晰的插入光标
-
2 Active slot当前格
:focus-visibleThe slot that receives the next character and carries the keyboard focus cue.
接收下一个字符并承担键盘焦点提示的格子。
Prompt fragmentPrompt 片段the active OTP slot with a 2px focus-visible ring and a stable caret
当前 OTP 格显示 2px focus-visible 焦点环和稳定插入光标
-
3 Validation status校验状态
aria-liveThe short message that confirms a complete code or explains why it is rejected.
确认代码完成，或说明代码为何被拒绝的短消息。
Prompt fragmentPrompt 片段an inline status region that announces code accepted, incomplete, or invalid without shifting the layout
使用 inline status 区域播报代码已接受、未完成或无效，不让布局跳动
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build an accessible OTP input with six visible slots and one logical value: numeric inputmode, autocomplete=one-time-code, paste support that distributes digits, backspace that moves to the previous filled slot, and predictable roving focus. Expose the group label once to assistive technology, keep each slot at least 44px tall, show a clear focus-visible ring, and respect prefers-reduced-motion.
构建一个可访问的 OTP 输入框，显示六个格子但维护一个逻辑值：使用 numeric inputmode 和 autocomplete=one-time-code；粘贴时分配字符；退格先清空当前格，再移动到上一个格子；焦点移动可预期。只向辅助技术暴露一次组标签；每个格子至少 44px 高；显示清晰的 focus-visible 焦点环；遵守 prefers-reduced-motion。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my OTP input. Check that mobile keyboards use numeric mode; autocomplete can fill the whole code; pasting distributes only allowed digits; typing advances exactly one slot; backspace clears before moving backward; arrow keys and focus restoration work; screen readers hear one labelled code field rather than six confusing fields; invalid and complete states are announced; and reduced-motion does not hide the caret or focus ring. The symptom:
调试我的 OTP 输入框。检查：移动键盘是否使用数字模式；autocomplete 是否能填充整段代码；粘贴是否只分配允许的数字；输入是否恰好前进一个格子；退格是否先清除再向后移动；方向键和焦点恢复是否正常；屏幕阅读器是否听到一个有标签的代码字段，而不是六个令人困惑的字段；无效和完成状态是否会播报；reduced-motion 是否仍保留插入光标和焦点环。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | inputmode="numeric" + autocomplete="one-time-code" | let mobile keyboards and password managers help让移动键盘和密码管理器提供帮助 |
| ARIA | role="group" + labelled slots | announce one field, not six unrelated inputs让辅助技术把它读成一个字段，而不是六个互不相关的输入框 |
| JS | paste + roving focus | split pasted digits across slots and move focus predictably把粘贴的数字拆到各个格子，并按可预期的顺序移动焦点 |
| CSS | :focus-visible + caret | make the active slot obvious without relying on color alone不用只靠颜色，也要让当前格子足够明显 |