如何让HTML输入框只能输入数字？input元素type属性设置number详解-html教程-PHP中文网

type="number"不能真正阻止非数字输入，因其仅对键盘输入部分拦截，不阻止粘贴、拖拽或脚本赋值，底层仍是字符串控件，value可为""、"12."、"e"等非法值，必须结合html属性、input事件监听与正则清洗，并依赖服务端二次校验。

如何让html输入框只能输入数字？input元素type属性设置number详解

为什么 `type="number"` 不能真正阻止非数字输入？

很多人以为设了 type="number" 就能“锁死”输入框只收数字，结果发现还能粘贴字母、输入中文句号、甚至提交时传回空字符串或 NaN。根本原因在于：浏览器只对**用户键盘输入做部分拦截**，但不阻止粘贴、拖拽、脚本赋值等行为；且它本质仍是文本输入控件，底层值仍是字符串，只是加了原生校验和上下箭头。

典型表现：input.value 可能是 ""、"12.3."（末尾点）、"e"（单个 e），甚至 "1e2"（科学计数法，合法但常被业务拒绝）。

如何真正限制只能输入有效十进制数字？

必须组合使用 HTML 属性 + JavaScript 监听 + 输入清洗。关键不是“拦住所有非法键”，而是“让每次输入后值始终处于可控状态”。

input 上加 pattern="[0-9]*" 和 inputmode="numeric"（提升移动端数字键盘体验，但不强制）
监听 input 事件（不是 keydown），因为粘贴、剪切、自动填充都触发它
用正则过滤：保留空字符串、纯数字、最多一个小数点（且不在开头/结尾）

示例逻辑：

input.addEventListener('input', e => {
  let v = e.target.value;
  // 允许空、整数、一位小数点（如 "123" 或 "12.3"）
  v = v.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
  if (v.startsWith('.')) v = '0' + v;
  if (v.endsWith('.')) v = v.slice(0, -1);
  e.target.value = v;
});