不能直接用做身份证键盘，因其仅触发数字软键盘，无法控制键序、拦截非法字符（如l/1混淆）、支持x校验码自动大写及光标精确定位，且粘贴、拼音输入等场景易导致格式错误；必须用div+button自定义键盘，设tabindex="0"并接管全部输入逻辑。
为什么不能直接用 <input type="tel"> 做身份证键盘
因为 type="tel" 仅触发系统软键盘的数字布局，无法控制键位顺序、禁用退格以外的删除行为、也无法在物理键盘上拦截非身份证字符（比如字母 l 和数字 1 混输），更做不到最后一位校验码自动计算和高亮。真实场景中，用户常误触拼音键盘、粘贴乱码、或手动删错位置——这些都得靠自定义键盘拦截和逻辑兜底。
用 div + button 搭建可聚焦的键盘 DOM 结构
必须让键盘容器可获得焦点，否则无法响应 keydown 事件；同时每个按键用 button 而非 span，保障语义正确和移动端点击反馈。关键点：
-
tabindex="0"加在键盘最外层div上，确保能被focus() - 所有
button设置type="button"，避免表单提交干扰 - 数字键用
data-value="0"~data-value="9"，字母键（X）单独设data-value="X"，便于统一处理 - 退格键绑定
data-action="backspace"，不依赖keyCode或key字符匹配
示例结构片段：
<div class="id-card-keyboard" tabindex="0"> <button type="button" data-value="1">1</button> <button type="button" data-value="2">2</button> <!-- ... --> <button type="button" data-action="backspace">⌫</button> <button type="button" data-value="X">X</button> </div>
输入逻辑必须绕过原生 input 的默认行为
直接监听 input 的 input 事件不可靠：粘贴、拖拽、右键粘贴、中文输入法组合字符都会绕过键盘按钮逻辑。正确做法是完全接管输入流：
- 把目标
<input>设为readonly，禁止任何非键盘输入 - 所有按键操作只修改一个受控的
value变量，再同步到 input 的value属性（不是innerHTML） - 退格逻辑要判断光标位置：用
input.selectionStart获取当前光标，再截取字符串，不能简单.slice(0, -1) - 输入第 18 位时，若用户按的是
X，需转为大写；若按的是x或其他键，应忽略或自动修正
关键校验代码节选：
function handleKeyClick(e) {
const btn = e.target;
const action = btn.dataset.action;
const val = btn.dataset.value;
<p>if (action === 'backspace') {
const pos = input.selectionStart;
const newVal = value.slice(0, pos - 1) + value.slice(pos);
setValue(newVal);
input.setSelectionRange(pos - 1, pos - 1);
} else if (val && value.length </p><h3>移动端点击延迟与 focus 失效问题怎么解</h3><p>iOS Safari 和部分安卓 WebView 中，<code>div[tabindex]</code> 默认无法被 <code>click</code> 触发 <code>focus()</code>，导致键盘失焦后无法再输入。根本解法只有两个：</p>
- 给键盘容器加
ontouchstart="this.focus()"（内联，不依赖 JS 绑定），强制唤醒 focus 能力 - 对目标
input在键盘首次激活时调用input.focus()，并加setTimeout延迟 10ms，绕过 iOS 的 focus 延迟限制 - 禁用
-webkit-user-select: none—— 否则长按复制会失效，影响辅助功能
别信“加 cursor: pointer 就能解决点击”，那只是视觉反馈，不修复 focus 链路。
身份证号长度固定、末位校验强依赖输入顺序，键盘组件一旦放任原生输入行为，后面所有校验、格式化、防粘贴逻辑都会变成补丁叠补丁。最省事的方案，反而是从第一行 JS 就切断默认输入通路，只留一条可控的数据入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
