如何限制<input type="number">输入框中用户输入小数数值？

方案1：HTML原生基础校验 #

直接给输入框添加step="1"属性，原生表单提交时会自动校验输入值必须为整数，实现成本最低：

<input type="number" step="1">

该方案仅做提交校验，用户仍可手动输入小数点等非法字符，建议搭配实时校验使用。

方案2：JavaScript实时拦截（推荐） #

该方案可完全禁止输入小数、字母、科学计数法符号等非法内容，同时完整保留退格、制表键、方向键、复制粘贴快捷键等常用功能的正常使用：

<input type="number" id="integerInput" step="1">

const integerInput = document.getElementById('integerInput');

// 拦截键盘输入，放行合法功能键
integerInput.addEventListener('keydown', e => {
  const allowedKeys = ['Backspace', 'Tab', 'Enter', 'Escape', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'a', 'c', 'v', 'x'];
  // 放行功能键和Ctrl组合快捷键
  if (allowedKeys.includes(e.key) || (e.ctrlKey && allowedKeys.includes(e.key))) {
    return;
  }
  // 拦截非数字输入
  if (isNaN(Number(e.key))) {
    e.preventDefault();
  }
});

// 拦截粘贴操作，自动过滤非法字符
integerInput.addEventListener('paste', e => {
  e.preventDefault();
  const pasteContent = (e.clipboardData || window.clipboardData).getData('text');
  integerInput.value = pasteContent.replace(/[^0-9]/g, '');
});

// 兜底校验，覆盖所有输入场景的非法值过滤
integerInput.addEventListener('input', () => {
  integerInput.value = integerInput.value.replace(/[^0-9]/g, '');
});

内容的提问来源于stack exchange，提问作者Adarsh Dubey