OTP输入框无法仅用HTML+CSS实现，因自动跳格、粘贴拆分、聚焦管理等行为必须由JavaScript监听input/paste/keydown事件驱动，HTML原生不支持这些交互逻辑。
HTML 本身没有原生 OTP 输入框组件，所谓“OTP 输入框”本质是多个 <input type="text"> 或单个 <input type="tel"> 配合 JS 控制行为实现的 UI 模式——直接用纯 HTML 写不出带自动跳格、粘贴拆分、聚焦管理的 OTP 效果。
为什么不能只靠 HTML + CSS 实现完整 OTP 行为
HTML 的 <input> 元素不提供“输入满一位自动跳到下一个框”或“粘贴 6 位码时自动分发到各格”的能力。这些逻辑必须由 JavaScript 主动监听 input、paste、keydown 等事件来驱动。
- 仅用
maxlength="1"和autocomplete="one-time-code"只能辅助浏览器识别场景，不触发任何跳格逻辑 -
autocomplete="one-time-code"是必要标记，否则 iOS/Android 键盘不会显示 OTP 建议栏（但不保证所有浏览器都支持） - 若忽略 JS，用户粘贴 6 位码时只会塞进第一个框，或被截断，体验直接崩坏
最简可行的 4 格 OTP 输入结构（含关键属性）
用 4 个独立 <input> 是兼容性最好、逻辑最可控的方式。每个框需绑定唯一 id 和 name，并设置基础约束：
<div class="otp-input"> <input type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1" id="otp-0" name="otp-0"> <input type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1" id="otp-1" name="otp-1"> <input type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1" id="otp-2" name="otp-2"> <input type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1" id="otp-3" name="otp-3"> </div>
-
inputmode="numeric"强制唤起数字键盘（比type="number"更稳妥，后者会触发浏览器校验和上下箭头） - 必须设
maxlength="1"，否则用户可能手动输多于 1 位 - 所有框应加
pattern="[0-9]"和inputmode="numeric"双保险防字母输入 - 不要用
type="password"——OTP 是一次性明文，且密码类型会禁用粘贴和自动填充建议
JS 必须处理的三个核心交互点
以下逻辑缺一不可，否则 OTP 输入流程就断在用户手上：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
输入后自动跳格：监听每个框的
input事件，当值非空且有下一个框时，focus()到下一个<input> -
删除时反向跳格：监听
keydown，当按Delete或Backspace且当前框为空时，focus()到上一个框 -
粘贴整段码自动分发：监听
paste事件，阻止默认行为，取event.clipboardData.getData('text')，过滤非数字字符，再逐字符填入连续的框（超出长度则截断）
示例关键片段（不依赖框架）：
const inputs = document.querySelectorAll('.otp-input > input');
inputs.forEach((input, i) => {
input.addEventListener('input', () => {
if (input.value && i < inputs.length - 1) {
inputs[i + 1].focus();
}
});
input.addEventListener('keydown', (e) => {
if ((e.key === 'Backspace' || e.key === 'Delete') && !input.value && i > 0) {
inputs[i - 1].focus();
}
});
input.addEventListener('paste', (e) => {
e.preventDefault();
const paste = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, inputs.length);
paste.split('').forEach((char, j) => {
if (inputs[i + j]) inputs[i + j].value = char;
});
if (paste.length > 0) inputs[Math.min(paste.length - 1, inputs.length - 1)].focus();
});
});移动端兼容性最容易翻车的两个细节
iOS 和 Android 对 autocomplete="one-time-code" 的支持程度不一，且软键盘行为差异大：
- Android Chrome 85+ 支持 OTP 自动填充提示，但需页面 HTTPS +
autocomplete属性正确 + 用户之前接收过短信（含标准 OTP 格式） - iOS 16+ 要求短信中 OTP 必须符合格式：
Your code is 123456.或123456 is your verification code.，否则不触发建议栏 - 部分安卓厂商定制键盘（如华为、小米）完全忽略
autocomplete，此时只能靠 JS 的粘贴分发兜底 - 别用
type="tel"代替type="text" inputmode="numeric"——前者在某些机型上会插入空格或连字符，导致验证失败
真正难的不是写几个输入框，而是让不同系统、不同键盘、不同粘贴习惯的用户，都能无感地把 6 位数字“放进去”。这中间每一步 JS 逻辑都要覆盖边界情况，比如连续删空、快速粘贴、光标乱跳——这些细节不压平，OTP 就只是长得像，而不是真的能用。
