限制输入框只输入数字应优先使用input事件配合正则替换/[^0-9]/g实时清理，兼顾粘贴等场景；keydown仅作辅助体验优化；需支持小数或负号时应增强校验逻辑，并配合type="number"和inputmode="numeric"提升移动端体验。
在 JavaScript 中限制输入框只能输入数字，核心思路是拦截非法字符的输入行为。最可靠的方式是监听 input 或 keydown 事件，实时过滤非数字内容，同时兼顾粘贴、拖入等场景。
用 input 事件 + 正则替换（推荐）
这是最常用且兼容性好的方式，能覆盖键盘输入、粘贴、拖放、自动填充等多种情况。
- 监听
input事件，在值变化后立即清理 - 用正则
/[^0-9]/g去掉所有非数字字符（如字母、符号、空格） - 注意：如果需要支持小数点或负号，正则需调整（见下文扩展）
const input = document.getElementById('numberInput');
input.addEventListener('input', function () {
this.value = this.value.replace(/[^0-9]/g, '');
});
用 keydown 阻止非法按键（辅助手段）
仅靠 keydown 不够全面（比如无法拦截粘贴），但可作为前端体验优化，避免无效按键反馈。
- 监听
keydown，检查e.key是否为数字、退格、删除、方向键、Tab 等合法键 - 对不匹配的按键调用
e.preventDefault() - 注意：不能只判断
e.keyCode（已废弃），优先用e.key
input.addEventListener('keydown', function (e) {
const validKeys = ['Backspace', 'Delete', 'Tab', 'Enter', 'Escape', 'ArrowLeft', 'ArrowRight'];
if (!/^[0-9]$/.test(e.key) && !validKeys.includes(e.key)) {
e.preventDefault();
}
});
支持小数和负号的进阶处理
若需允许小数（如 12.34）或负数（如 -5），需更精细的逻辑：
立即学习“Java免费学习笔记（深入）”；
- 允许最多一个
.和最多一个-（且-必须在开头） - 建议仍以
input事件为主，配合更严谨的正则或函数校验 - 例如：
this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1').replace(/^([^.]*)(\..*)/, (m, g1, g2) => g1.replace(/-/g, '') + g2);—— 这类逻辑较复杂，推荐封装成校验函数
别忘了 HTML 层面的基础防护
JavaScript 是客户端校验，不能替代服务端验证，但可配合 HTML 增强体验：
- 设置
type="number"：触发原生数字键盘（移动端友好），并有基础校验 - 添加
inputmode="numeric"：明确提示系统弹出数字键盘 - 注意：
type="number"允许输入e、+、-、.，仍需 JS 补充限制
<input id="numberInput" type="number" inputmode="numeric" />
