OTP input 验证码输入框
/OH-tee-pee IN-put/ · noun · 输入类模式 · #120
输入一次性验证码的一排小方框，通常 4 或 6 格；验证码来自短信、邮件或身份验证器 App。每格一位数字，输完一格光标自动跳到下一格。最好只用一个真正的输入框，方框只是画出来的，这样手机能直接从短信里带出验证码，粘贴时也能一次填满所有格子。
别名：验证码框。
你可能会这样叫它
- “输短信验证码的那几个格子”
- “验证码方框”
- “六位验证码输入框”
- “一格一个数字的输入框”
……它的名字是 验证码输入框（OTP input）。
常见问题
验证码输入框叫什么名字？
英文一般叫 OTP input（一次性密码输入框），组件库里也叫 PIN input 或 verification code input。就是那一排 4 到 6 个小方框，用来输入短信、邮件或身份验证器 App 给的验证码，每格一位数字，输完一格光标自动跳到下一格。
短信验证码如何自动填充？
iPhone 上一般不用设置：收到验证码短信后，键盘上方会出现这串数字，点一下就填好。做网站或 App 时，最稳妥的是把输入框标成“一次性验证码”：网页加 autocomplete="one-time-code"，iOS 设成 .oneTimeCode，Android 用 smsOTPCode 自动填充提示。
代码里叫什么
| Web (HTML) | autocomplete="one-time-code" inputmode="numeric" |
|---|---|
| SwiftUI / UIKit | .textContentType(.oneTimeCode) UITextContentType.oneTimeCode |
| Android | android:autofillHints="smsOTPCode" SMS User Consent API |
| React (shadcn/ui) | InputOTP InputOTPSlot |
| React (Mantine / Chakra UI) | PinInput |
| Ant Design | Input.OTP |
复制给 AI 编程工具
加一个输入验证码的步骤：用一个输入框，设置 autocomplete="one-time-code"、inputmode="numeric"，maxlength 等于验证码位数，画成六个方框，每格显示一位数字，当前格高亮。输入后自动跳到下一格，按退格回到上一格，粘贴整串验证码时一次填满所有格子，输完最后一位自动提交。给读屏软件加上标签，错误提示写在方框下方，再加一个带倒计时的“重新发送验证码”链接。