六位圆点密码输入框通过六个独立type="tel"输入框模拟，配合隐藏域存储真实值、自动聚焦跳转、退格回溯、圆点视觉反馈及粘贴/兼容性优化实现。
六位圆点密码输入框不是用单个 实现的，而是通过六个独立的 （或 type="tel"）配合样式和 JavaScript 逻辑模拟出来的交互效果。核心在于：隐藏真实输入、聚焦自动跳转、退格智能回溯、视觉上统一显示为圆点。
结构：六个独立输入框 + 隐藏真实值
每个输入框只允许输入 1 位数字，宽度设为正方形（如 40px），用 text-align: center 居中。整体用 display: flex 水平排列，间距均匀：
<div class="pin-input"> <input type="tel" inputmode="numeric" maxlength="1" autocomplete="off"><input type="tel" inputmode="numeric" maxlength="1" autocomplete="off"><input type="tel" inputmode="numeric" maxlength="1" autocomplete="off"><input type="tel" inputmode="numeric" maxlength="1" autocomplete="off"><input type="tel" inputmode="numeric" maxlength="1" autocomplete="off"><input type="tel" inputmode="numeric" maxlength="1" autocomplete="off"> </div> <input type="hidden" id="real-pin" value="">
注意：用 type="tel" + inputmode="numeric" 可在移动端唤起数字键盘；autocomplete="off" 防止浏览器自动填充；maxlength="1" 限制单格只输一位。
交互逻辑：聚焦、输入、退格三步控制
关键 JS 行为如下：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 每个输入框监听
input事件：输入有效数字后，自动聚焦下一个（若存在） - 监听
keydown：捕获Backspace或Delete，清空当前格，并聚焦前一个（若当前为空且有前格） - 所有输入框监听
focus，统一移除前后空格、过滤非数字字符（可用input.replace(/\D/g, '')） - 每次变更后，拼接六格值存入隐藏域
#real-pin，同时可触发自定义验证或提交逻辑
视觉反馈：圆点代替明文，聚焦高亮边框
CSS 样式要点：
- 所有输入框设置
text-indent: -9999px或color: transparent隐藏真实字符 - 用伪元素
::after或背景图/内联 SVG 在框中显示实心圆点（●），或直接用background: radial-gradient(...) - 聚焦时加
box-shadow: 0 0 0 2px #007aff或边框变色，提升可操作性 - 禁用默认 outline：
outline: none，避免双轮廓
补充细节：兼容与体验优化
实际项目中还需考虑：
- 粘贴支持：监听
paste事件，截取前 6 位数字，逐位填入各框并自动聚焦末位 - 安卓微信等环境可能触发拼音输入，可加
spellcheck="false" autocapitalize="none" - 失焦时若未输满 6 位，可自动回到第一位聚焦，或弹提示“请输入完整 6 位密码”
- 输入完成后，可禁用所有框（
disabled）防止误改，或保留可编辑但加锁图标提示
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
