HTML表单控件输入框只能输入数字的实现技巧-html教程-PHP中文网

input type="number" 不实时拦截字母，因其仅在提交或失焦时校验，允许粘贴、输入e/+/-/.等科学计数字符；需结合 inputmode="numeric"、oninput 正则过滤及服务端校验才能真正限制纯数字输入。

html表单控件输入框只能输入数字的实现技巧

input type="number" 为什么有时不拦得住字母？

因为 type="number 只限制表单提交时的值类型，不阻止用户键盘输入非数字字符（比如粘贴 "abc"、输入 "12e3" 或 "++1"）。浏览器允许临时输入无效内容，直到失去焦点或提交时才校验——这意味着前端校验不能只靠它。

Chrome/Firefox 允许输入 e、+、-、.（用于科学计数或小数），但这些未必符合你的业务规则（比如“只能输整数”）
移动端软键盘可能仍弹出字母键盘（尤其 Safari iOS），inputmode="numeric" 能提示但不强制
用户右键粘贴、拖入文本、用开发者工具改 DOM 都能绕过

oninput + 正则过滤比 onkeypress 更可靠

onkeypress 拦截不了粘贴、剪切板操作和部分组合键；而 oninput 在值实际变化后触发，配合正则替换更稳。关键是要「改完立刻同步回 value」，否则 UI 和实际值会脱节。

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

整数场景：用 /[^0-9]/g 清除非数字，再处理空字符串（避免清空后留空格）
带符号/小数点：需更细粒度逻辑，比如只允许开头一个 -、最多一个小数点、小数点后不能有负号
别用 parseInt 或 Number() 直接转换——它们对 "12a" 返回 12，但用户看到的还是乱码，体验差

input.addEventListener('input', e => {
  let v = e.target.value.replace(/[^0-9]/g, '');
  if (v === '' && e.target.value !== '') v = '0'; // 防空
  e.target.value = v;
});

required 和 pattern 配合 validity API 做语义化校验

仅靠过滤不能替代表单语义校验。required 和 pattern 让浏览器原生提示更友好，且 checkValidity() 可在 JS 中统一判断。

pattern="[0-9]*" 对空值也通过，加 required 才真正要求非空
用 setCustomValidity() 可覆盖默认提示，比如提示“请输入有效数字”而不是“值与所需格式不匹配”
注意 validity.badInput 在 type="number" 输入非法字符（如 "12a"）时为 true，但 validity.valid 是最终结果

移动端 numeric 键盘适配要分浏览器写

iOS Safari 对 inputmode="numeric" 支持弱，常 fallback 到默认键盘；Android Chrome 较好。光靠属性不够，得组合策略。

同时设置 inputmode="numeric" + pattern="[0-9]*" + type="text"（绕过 Safari 的 number 类型 bug）
若必须用 type="number"，iOS 上可监听 blur 再做一次清洗，防止用户切换键盘后输错
避免用 min/max 控制范围——它们只影响 spinner 和校验，不阻止输入，且 iOS 不显示 spinner