如何制作一个HTML PIN码输入框？

本文共计862个文字，预计阅读时间需要4分钟。

纯HTML无法实现真正意义上的PIN码输入框（即自动聚焦、限制只输入数字、隐藏内容、逐位跳转等）。必须配合JavaScript才能完成。

为什么不能只用 type="password"？

它会隐藏所有字符，但 PIN 码通常需要「显示位数」（如 ●●●●）且不允许字母/符号；更重要的是，它不阻止粘贴非数字内容，也无法控制光标跳转逻辑。

• 用户粘贴 "abc123" 会静默接受前几位，导致长度错乱
• 长按输入法可能触发字母候选，inputmode="numeric" 仅是提示，不强制
• 移动端软键盘仍可能弹出完整键盘（尤其 iOS Safari 对 type="password" + inputmode 支持不稳定）

用 type="tel" + inputmode="numeric" 能行吗？

这是最轻量的“够用”方案，适合对体验要求不高的场景，但需主动拦截非法输入。