contenteditable 无法直接限制只输入数字，必须通过拦截+规范化实现：监听 keydown 阻非数字键、input 清理内容、paste 拦截转纯文本、禁用换行、兼容输入法及多端浏览器。
contenteditable 本身不提供输入过滤能力，**无法直接限制只输入数字**。它只是开启编辑态，所有字符、格式、粘贴行为都由浏览器自由处理——你加 contenteditable="true" 后，用户照样能粘贴中文、回车换段、拖入图片、甚至嵌套 <script></script>。
真正可行的路径只有一条：**拦截 + 规范化**。下面分关键场景说明怎么做。
监听 keydown + input 实时过滤非数字字符
仅靠 keypress 已不可靠（Chrome 98+ 不触发），必须用 keydown 拦键 + input 清理残留。
-
keydown阻止非数字、小数点、退格（Backspace）、删除（Delete）、方向键、Enter、Tab 等必要控制键以外的输入 -
input事件里用正则清理 DOM 内容：el.textContent = el.textContent.replace(/[^0-9.]/g, '') - 注意：不能只操作
textContent，因为contenteditable元素内可能有<br>或空格节点；建议统一用el.innerText读取再写回，或清空后重建文本节点
处理粘贴（paste）防止纯文本外的干扰
用户 Ctrl+V 粘贴 Word、网页内容时，contenteditable 会带入大量冗余标签和样式，数字校验完全失效。
- 必须
event.preventDefault()拦截原生粘贴 - 用
event.clipboardData.getData('text/plain')提取纯文本 - 再用正则过滤出数字部分：
const numText = plainText.match(/[\d.]+/g)?.join('') || ''，然后插入到光标位置（用getSelection()+Range） - 别用
document.execCommand('insertText')——该 API 已废弃，Safari 17+ 不支持
避免回车/换行破坏单行数字输入
contenteditable 默认按 Enter 插入 <div> 或 <code><p></p>，直接让单行数字输入崩溃。
- 给元素设 CSS：
white-space: nowrap; overflow: hidden;，并禁用软换行 - 在
keydown中捕获Enter（key === 'Enter'）并event.preventDefault() - 如果需要“确认提交”，应绑定外部按钮，而非依赖 Enter 键
- 移动端尤其要注意：iOS Safari 的软键盘 Enter 键行为不稳定，
inputmode="numeric"只影响键盘类型，不阻止非数字输入
移动端光标与输入法兼容问题最易被忽略
Android 输入法、iOS QuickType、双拼/五笔等场景下，keydown 事件可能不触发或延迟，导致过滤失效，出现半截中文或符号。
- 必须同时监听
compositionstart/compositionend，在输入法上屏完成后再做校验 - 不要依赖
event.key判断字符——输入法期间它常为'Process'或空字符串 - 更稳妥的做法：每次
input后延时 50ms 执行清理（用setTimeout或requestIdleCallback），避开输入法中间态 - 测试重点不是 Chrome Desktop，而是 iOS Safari + 微信内置浏览器 + 华为/小米自带浏览器
contenteditable 的 DOM 操作不可控性**：一次 Backspace 可能删掉整个 <span style="color:red"></span>，也可能只删一个字符；一次 paste 可能生成 20 层嵌套 <span></span>。数字输入这种强约束场景，contenteditable 天然不适合——除非你愿意投入精力重写整套输入引擎。
