最可靠方案是type="text"+inputmode="numeric"+pattern="\d+"+javascript实时过滤，并强制服务端校验。浏览器原生number类型防不住粘贴和dom修改，inputmode唤起数字键盘，pattern触发提交提示，js用replace(/\d/g,"")实时清理，后端必须做类型转换和范围校验。
input type="number" 是最直接的写法，但别指望它能防住所有非法输入
浏览器原生支持 type="number"，会自动禁用非数字键盘（移动端）、显示上下微调按钮，并在表单提交时做基础校验。但它对粘贴、开发者工具修改、空值、负号、小数点等完全不设防——比如用户仍可粘贴 "123abc" 或直接改 DOM 写入 "-."。
实操建议：
- 必须配合
pattern+title做前端提示：如<input type="number" pattern="\d*" title="请输入数字">（注意：pattern在type="number"下实际无效，仅当type="text"时生效） - 更可靠的做法是用
type="text"+inputmode="numeric"+ JavaScript 过滤，兼顾体验与控制力 - 服务端永远要二次校验，前端限制只是用户体验优化
用 inputmode 和 pattern 实现软性限制（移动端友好）
inputmode="numeric" 会强制唤起数字键盘（iOS/Android 均支持），pattern="\d*" 则在表单提交时触发浏览器原生提示。两者搭配比纯 type="number" 更可控。
示例写法：
<input type="text" inputmode="numeric" pattern="\d*" title="请输入正整数">
注意点：
-
pattern只在调用checkValidity()或表单 submit 时触发，不阻止实时输入 -
\d*允许空字符串；若需非空，改用\d+ - IE 不支持
inputmode，但 fallback 到普通文本框不影响功能
用 JavaScript 实时过滤非法字符（精确控制输入内容）
如果必须确保 value 里只含数字（比如金额、ID），监听 input 事件并正则替换是最稳妥的实时方案。
关键代码逻辑：
input.addEventListener('input', e => {
e.target.value = e.target.value.replace(/\D/g, '');
});
常见变体与注意事项：
- 允许小数点和负号？用
replace(/[^0-9.-]/g, '')，但需额外逻辑防止多个小数点或负号错位 - 避免光标跳到末尾：替换前记录 selectionStart/End，替换后手动恢复（复杂场景建议用
setRangeText） - 不要监听
keydown—— 它无法拦截粘贴、拖入、IME 输入等行为 - 该逻辑对
type="number"也有效，但没必要：不如统一用type="text"避免浏览器默认行为干扰
form 表单提交时的最终校验不能省
无论前端做了多少层限制，用户关掉 JS、绕过监听、或直接发 POST 请求，都能把任意字符串送过来。所以后端收到字段后，必须做类型转换 + 范围校验。
典型错误处理点：
- PHP 中
$_POST['age']是字符串，要用filter_var($val, FILTER_VALIDATE_INT)而非is_numeric() - Python Flask 中
request.form.get('count')同样是字符串，需int(val)并捕获ValueError - 数据库字段类型（如
INT）不会自动截断或报错，可能静默转成 0 或溢出，得靠应用层兜底
真正难的不是“怎么让输入框只输数字”，而是“怎么让整个链路对异常输入有明确响应”。前端限制只是第一道纱门，后面每一步都得自己盯住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
