应使用 input type="text" 配合键盘事件拦截与双值管理：禁用非法字符输入，校验小数点唯一性、小数位≤2、整数部分不以多余0开头；内部维护无格式 rawValue，显示层添加千分位和小数点，并同步光标语义位置。
怎么让键盘只输入合法金额格式
金额输入最怕用户乱敲：小数点连按、负号、字母、开头多个零……input type="number" 原生不支持千分位和精确小数位控制，且在 iOS 上会触发数字键盘但允许粘贴非法内容。真正可控的方式是用 input type="text" + 键盘事件拦截 + 格式化逻辑。
核心思路是：禁用默认输入行为，监听 keydown 和 input，对每次输入做合法性校验和格式修正。重点校验三点：最多一位小数点、小数点后最多两位、整数部分不能以 0 开头（除非就是 "0"）。
- 按
.时，若已存在小数点，直接preventDefault() - 输入数字时，先提取当前值的纯数字部分（去掉点和前导零），再拼接新字符，最后用正则
^0*(\d+)(\.\d{0,2})?$匹配并截断 - 粘贴内容必须用
paste事件捕获，event.clipboardData.getData('text')取出后同样走校验逻辑，不能放行原始字符串
为什么用自定义键盘而不是原生软键盘
原生软键盘在不同平台表现割裂：Android 多数只弹出数字键，iOS 却可能带符号键甚至英文；且无法控制「.」键是否显示、是否允许长按输入「.」、是否禁用「e」「E」「-」等非法字符。自定义键盘能彻底掌控按键集和交互反馈。
关键不是“炫技”，而是业务强约束场景下必须规避所有绕过输入框校验的路径——比如用户切出 App 后复制粘贴、用语音输入、或外接蓝牙键盘输入。
立即学习“前端免费学习笔记（深入）”；
- 键盘组件应只暴露
0–9、.、←（退格）、清空四类按钮，禁用其他任何符号 - 每个按键点击需调用
inputElement.setRangeText()或手动更新value并同步光标位置，否则 iOS 上光标容易跳到末尾 -
←键逻辑要区分：光标在小数点后 → 删除小数位；光标在小数点位置 → 删除小数点；光标在整数末尾 → 删除数字；光标在开头 → 不操作
如何处理光标位置和千分位格式化冲突
一旦加了千分位（如 1,234.56），字符串长度和真实数值长度就不一致，直接用 selectionStart 计算光标位置会错乱。例如用户想在 1,234.56 的 2 和 3 之间插入数字，光标实际落在第 3 个字符（逗号后），但你得把它映射回数值中的第 3 位数字位置。
解决办法不是“格式化后塞进 input”，而是“格式化只用于显示，内部始终维护一个干净的数值字符串”。推荐双值管理：
- DOM
input.value显示带千分位和小数点的格式化字符串（仅用于视觉） - 内部状态
rawValue存储无逗号、无前导零、最多两位小数的纯数字字符串，如"1234.56"或"0" - 所有输入逻辑操作
rawValue，每次变更后调用格式化函数生成显示值，并用setSelectionRange()手动恢复光标到对应语义位置
格式化函数示例：rawValue.replace(/^(\d+)(\.\d{1,2})?$/, (_, int, dec) => Number(int).toLocaleString() + (dec || ''))，但注意 toLocaleString() 在某些环境可能用空格或句点作千分位，生产环境建议手写正则替换。
移动端点击区域小、误触多，怎么提升键盘可用性
物理键盘按键小、手指粗、屏幕反光，导致连续点击同一键或滑到邻键很常见。单纯加大按钮尺寸不够，得从交互层加固：
- 每个按键添加
touchstart时加临时 active 类，配合 CSStransform: scale(0.95)给视觉反馈，避免用户怀疑没点中 - 连续快速点击同一键（间隔
- 退格键长按应触发连续删除（类似原生键盘），但需限制速率（如 50ms/次），并在松开时清除定时器
- 键盘容器加
user-select: none，防止 iOS 上误触发文字选中菜单
最容易被忽略的是键盘与输入框的绑定时机：必须等 input 元素真实挂载 DOM 且可聚焦后，才初始化键盘事件监听，否则 iOS 下首次点击键盘可能无法唤起焦点。
