本文介绍在不更改 input type 的前提下，通过原生 javascript 实现 text 类型输入框的纯数字限制，兼容性好、无依赖，适用于 angular、react 或原生项目。
在实际开发中，有时因样式兼容、移动端软键盘行为（如 type="number" 在 iOS 上可能触发小数点/负号）、或框架表单验证逻辑限制，我们无法直接使用 type="number"，但仍需确保用户只能输入数字。此时，可通过 JavaScript 拦截键盘输入事件，实时过滤非数字字符。
✅ 推荐方案：onkeypress + 键码校验（轻量可靠）
以下是一个经过广泛验证的纯数字输入控制函数：
<label for="idCard">ID:</label> <input type="text" class="form-control form-control-sm" formControlName="idCardInput" name="idCard" id="idCard" onkeypress="return isNumberKey(event)" />
function isNumberKey(event) {
const charCode = event.which ? event.which : event.keyCode;
// 允许: 数字键 (48–57), 回车(13), Tab(9), 删除(8), 方向键(37–40), Home(36), End(35), 退格(8)
if (
charCode === 8 || // Backspace
charCode === 9 || // Tab
charCode === 13 || // Enter
charCode === 35 || // End
charCode === 36 || // Home
(charCode >= 37 && charCode <= 40) || // 方向键
(charCode >= 48 && charCode <= 57) // 数字 0–9（主键盘及小键盘）
) {
return true;
}
return false;
}? 说明：该函数基于 keypress 事件（在字符生成前触发），通过 keyCode 精准拦截非数字按键。它保留了常用导航与编辑功能（如删除、方向键），提升用户体验。
⚠️ 注意事项
- ❌ 避免仅依赖 ng-pattern（Angular）或 pattern 属性：它们仅做提交前校验，无法阻止用户输入非数字字符；
- ❌ 不推荐 input 事件 + value.replace()：会导致光标跳动、粘贴失效、移动端兼容性差；
- ✅ 若需支持粘贴（Paste）场景，建议补充 onpaste 处理（见进阶补充）；
- ✅ 如需支持小数或负数，请扩展校验逻辑（例如允许单个 . 或 - 在首位），但本例聚焦「纯整数」需求。
? 进阶补充：支持粘贴过滤（可选）
<input type="text" onkeypress="return isNumberKey(event)" onpaste="return handlePaste(event)" />
function handlePaste(event) {
const clipboardData = event.clipboardData || window.clipboardData;
const pastedText = clipboardData.getData('text');
if (!/^\d*$/.test(pastedText)) {
event.preventDefault();
return false;
}
}✅ 总结
对于 type="text" 输入框的数字约束，onkeypress + keyCode 白名单校验是最稳定、低侵入、跨框架通用的方案。它不改变 DOM 结构、不影响 CSS 样式、无需引入第三方库，且在 IE11+ 及所有现代浏览器中表现一致。在 Angular 项目中，你仍可保留 ng-pattern 作为辅助验证，但核心输入控制务必由 JavaScript 实时拦截完成。
