FORM & INPUT
验证码格子输入OTP / PIN Input
几位数字各占一格，输入完自动跳下一格，粘贴时自动分拆——安全感的具象化。
效果预览
–
适合用在哪
手机/邮箱验证码、两步验证、支付密码。
容易踩的坑
- 未设 autocomplete="one-time-code" 和 inputmode="numeric"，手机无法自动填充短信验证码。
- 粘贴只填入第一格，用户需手动逐位输入 6 位数字，极易放弃。
- 每格都没有 aria-label 标明第几位，读屏用户只听到 6 个相同的「编辑框」。
设计提示词 · Prompt
验证码格子输入（OTP Input）：4-6 个等宽方格（40-52px 见方、圆角 10-12px、居中大号数字 20-24px），焦点格用品牌色描边 + 3px 12% 光晕。行为规则：输入即跳下一格；退格删除后跳回上一格；方向键可移动；粘贴整段验证码时自动拆分逐格填入；全部填满自动提交。已填格子可用浅品牌底色标记。格子间距 8-12px，中间加分隔线（-）也是常见变体。每个格子用单字符 input（maxlength=1）实现最稳。
OTP Input: 4-6 equal-width boxes (40-52px square, border radius 10-12px, centered large digits at 20-24px); the focused box uses a brand-color border + 3px 12% glow. Behavior rules: typing jumps to the next box; backspace deletes and jumps back to the previous box; arrow keys move between boxes; pasting a full code automatically splits it across boxes; auto-submit when all boxes are filled. Filled boxes can be marked with a light brand background. Box spacing 8-12px; adding a separator (-) in the middle is a common variant. Implementing each box as a single-character input (maxlength=1) is the most robust.
常见搭配
同一页面里经常和「验证码格子输入」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s">
<div class="d-otp">
<input value="7" readonly class="filled">
<input value="2" readonly class="filled">
<input placeholder="·">
<span class="d-otp__dash">–</span>
<input placeholder="·">
<input placeholder="·">
</div>
</div>