纯HTML无法实现可复用数字键盘，必须用JS处理点击、聚焦、退格（需操作selectionStart/End）和确认逻辑，CSS仅负责样式，HTML仅提供结构；移动端须用touchstart、44px按钮、禁缩放viewport。
怎么用纯 HTML + CSS + JS 实现一个可复用的数字键盘
直接说结论：不能只靠 HTML，必须配合 JavaScript 处理按键点击、输入聚焦、退格和确认逻辑；HTML 只负责结构，CSS 控制布局和样式，JS 才是让键盘“动起来”的核心。零基础也能做，但得接受要写少量 JS —— 否则就是一堆静态按钮，点不了、输不进、删不掉。
常见错误现象：input 没绑定事件，点了按钮没反应；键盘弹出后焦点丢失，再点数字没输入到目标框；按退格键删了整个输入框内容，而不是最后一位。
- 使用场景：表单中需要限制只输数字（如验证码、金额、密码），又不想依赖系统软键盘（比如在 kiosk 设备或微信内嵌页）
- 结构上用
<div class="numpad">包住 12 个按钮（0–9、backspace、confirm），每个按钮用<button type="button">，避免触发表单提交 - 关键 JS 逻辑要绑定到「当前激活的输入框」，推荐用
document.activeElement判断，而不是硬编码某个id - 不要给按钮加
onclick="xxx()"内联事件——统一用addEventListener管理更可控
为什么 backspace 按钮经常删错或失效
根本原因：没模拟原生退格行为，而是直接取 input.value 然后 .slice(0, -1) —— 这在光标不在末尾时会出错（比如中间插入、选中部分文本）。
正确做法是操作 selectionStart 和 selectionEnd：
立即学习“前端免费学习笔记（深入）”；
const input = document.activeElement;
if (input && input.tagName === 'INPUT') {
const start = input.selectionStart;
const end = input.selectionEnd;
if (start === end) {
// 光标未选中文字：删前一位
input.value = input.value.slice(0, start - 1) + input.value.slice(start);
input.setSelectionRange(start - 1, start - 1);
} else {
// 有选中文字：直接清空选区
input.value = input.value.slice(0, start) + input.value.slice(end);
input.setSelectionRange(start, start);
}
}- 务必检查
start > 0，否则start - 1会变成 -1，slice(0, -1)会意外删掉最后一个字符 - 调用
setSelectionRange前确保 input 已聚焦（input.focus()），否则无效 - 移动端 Safari 对
setSelectionRange支持较弱，若遇到光标跳变，可降级为只做.slice+.focus()
confirm 按钮要不要触发表单提交
绝大多数情况：不要。它只是收起键盘或通知业务逻辑“用户输完了”，不是提交动作本身。
典型误用：<button type="submit">确认</button> 放在表单里，一按就刷新页面。
- 始终用
type="button"，然后在 JS 里手动触发你需要的行为（比如调用validateCode()、nextStep()） - 如果真要提交表单，应在确认后调用
form.dispatchEvent(new Event('submit', { cancelable: true }))，而不是靠按钮类型 - 注意兼容性：
dispatchEvent在 IE 中需用createEvent回退，但如今基本可忽略 IE - 别忘了在
confirm后调用input.blur()，防止软键盘残留（尤其 iOS）
移动端适配最容易被忽略的三个点
写完在桌面测得好好的，一上手机就失灵——大概率卡在这三处。
-
touchstart代替click：iOS Safari 对click有约 300ms 延迟，且按钮可能无响应，统一监听touchstart并preventDefault() - 按钮尺寸至少
44px × 44px：符合苹果人机界面指南，不然手指点不准，尤其小屏设备 - 禁用缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，否则双指缩放会让键盘按钮错位或点击偏移
真正难的不是画出 12 个按钮，而是让它们在各种输入场景下稳定接管焦点、正确增删、不干扰原生行为。尤其是光标位置处理和移动端事件链，多试几次真机调试，比看十篇教程都管用。
