最直接有效方案是onkeypress配合正则拦截e和小数点：仅放行0–9，keyCode兼容主流浏览器；需额外监听oninput/onpaste清理粘贴内容，并禁用上下箭头防止误操作。
onkeypress 拦截 e 和小数点最直接有效
浏览器把 e 当作数学常数（≈2.718）允许输入，. 则用于小数，但它们在整数场景下都是非法字符。靠 type="number" 原生行为无法彻底屏蔽，必须在按键阶段拦截。
用 onkeypress + 正则是最轻量、兼容性最好的方案：
<input type="number" onkeypress="return /[\d]/.test(String.fromCharCode(event.keyCode))">
- 只放行 ASCII 48–57（即
0–9），e、.、-、+全部被拒 -
keyCode在现代 Chrome/Firefox/Edge 中仍可靠；Safari 16+ 已支持，旧版 Safari 可降级为event.key判断 - 注意：该写法不阻止粘贴（
paste事件需额外监听），也不影响通过 JS 赋值
为什么不能只靠 min/max/step 属性
min="0" max="100" step="1" 看似能限定整数范围，但实际对输入过程无约束力：
- 用户仍可输入
50e2，浏览器会自动解析为5000，再触发change时值已失真 -
step="1"仅影响点击上下箭头的行为，不影响键盘输入 - 表单验证器（如
Validators.min(0)）只能校验最终值，无法还原原始输入意图
粘贴和移动端的漏网之鱼怎么补
用户右键粘贴或长按唤出软键盘时，onkeypress 不触发，e 和小数点可能绕过：
立即学习“前端免费学习笔记（深入）”；
- 必须监听
oninput或onpaste，用正则清理值：inputEl.value = inputEl.value.replace(/[^0-9]/g, '') - 移动端 iOS Safari 对
onkeypress支持不稳定，建议加一层inputEl.addEventListener('input', ...)实时清洗 - 避免在
input事件里直接inputEl.value = ...后再setSelectionRange，否则光标会跳到末尾
禁用步进器（上下箭头）是配套动作
隐藏右侧箭头不是“锦上添花”，而是防止用户误点后意外触发非预期数值变化：
input::-webkit-outer-spin-button,<br>input::-webkit-inner-spin-button {<br> -webkit-appearance: none;<br>}<br>input[type="number"] {<br> -moz-appearance: textfield;<br>}
- WebKit 内核（Chrome/Safari）必须用伪元素清除；Firefox 需
-moz-appearance: textfield - 不处理的话，用户点箭头可能让值变成
101或负数，即使你写了max="100" - 这个 CSS 不影响输入拦截逻辑，但属于完整方案里不可省的一环
