如何阻止type="number"输入框接受尾部短横线（如"10-"或"10-7"）？

嘿，这个问题我之前也踩过坑！HTML原生的type="number"输入框其实有个反直觉的小问题——它允许输入像"10-"或"10-7"这种带尾部横杠的内容，而且这种无效输入根本拿不到正确的数值。下面给你几个实用的解决办法，按需选就行：

这是最直接的方案，在用户输入（包括粘贴）的时候就把不符合规范的字符干掉，从源头阻止无效内容出现：

const numberInput = document.querySelector('input[name="Number"]');

numberInput.addEventListener('input', function(e) {
  // 第一步：只保留数字和单个开头的负号（如果需要支持负数的话）
  let validValue = this.value.replace(/[^0-9-]/g, '');
  validValue = validValue.replace(/^-+/, '-'); // 确保开头最多一个负号
  validValue = validValue.replace(/-(?=-)/g, ''); // 去掉中间的负号

  // 第二步：如果末尾是负号，直接砍掉，避免留下无效格式
  if (validValue.endsWith('-')) {
    this.value = validValue.slice(0, -1);
  } else {
    this.value = validValue;
  }
});

这个逻辑会让用户根本没法在数字后面输入横杠，粘贴带横杠的内容也会被自动修正，体验很顺畅。

如果你的输入框在表单里，可以结合pattern属性和JavaScript验证，在提交时拦住无效输入：

首先给输入框加属性：

<input name="Number" type="number" pattern="^-?\d+$" title="请输入有效的整数，支持负数但不能带尾部横杠">

然后给表单加提交监听：

document.querySelector('form').addEventListener('submit', function(e) {
  const numberInput = document.querySelector('input[name="Number"]');
  const validFormat = /^-?\d+$/.test(numberInput.value);
  
  if (!validFormat) {
    alert('抱歉，请输入正确的数字格式，不能在数字后面加横杠哦！');
    e.preventDefault(); // 阻止表单提交
  }
});

注意：有些浏览器对type="number"的pattern支持不太友好，所以一定要配合JS验证双保险。

如果原生number输入框的各种奇怪行为让你头疼，不如直接换成text类型，用inputmode="numeric"保证移动端弹出数字键盘，体验和number差不多，还能彻底控制输入规则：

<input name="Number" type="text" inputmode="numeric" pattern="^-?\d+$">

然后再配合方法1的输入监听逻辑，就能完全杜绝任何无效格式的输入了。

不管用哪种方法，最后获取数值的时候最好再校验一遍，避免意外情况：

const inputValue = numberInput.value.trim();
const validNumber = /^-?\d+$/.test(inputValue) ? parseInt(inputValue, 10) : null;

// 如果validNumber是null，说明输入无效，这里可以给用户提示
if (validNumber === null) {
  console.log('输入格式不正确，请重新输入！');
}

内容的提问来源于stack exchange，提问作者Bartosz Magier