为何input type number允许多减号输入？如何禁用该异常输入？

为什么会允许这类输入？ #

浏览器原生的input[type="number"]设计逻辑是允许输入过程中的临时不规范内容，目的是给用户留修正空间——比如用户先输入了减号，又想删掉重输，或者输入一半改主意的情况。只有当表单提交、调用checkValidity()方法，或者获取输入框的value属性时，浏览器才会校验内容是否为有效数字，临时的多减号输入属于未完成的输入状态，原生不会直接拦截。

如何禁用这种异常输入？ #

可以通过以下几种方式实现实时拦截：

方法1：监听input事件，实时过滤非法内容 #

通过JavaScript监听输入事件，用正则表达式只保留合法的数字格式（开头最多一个减号，后面跟数字），直接修正输入内容：

const numberInput = document.querySelector('input[type="number"]');
numberInput.addEventListener('input', function() {
  // 只保留开头可选的一个减号，以及后续的数字
  this.value = this.value.replace(/^(-)?(\d*).*/, '$1$2');
});

这个方法能覆盖键盘输入、粘贴等所有输入场景，确保输入框内容始终符合规范。

方法2：结合keydown事件阻止重复减号输入 #

如果只想阻止用户多次输入减号按键，可以监听键盘按下事件，当输入框已有减号时，阻止再次输入减号：

numberInput.addEventListener('keydown', function(e) {
  if (e.key === '-' && this.value.indexOf('-') !== -1) {
    e.preventDefault();
  }
});

注意：这个方法只能阻止键盘输入减号，无法处理粘贴包含多减号内容的情况，建议和方法1配合使用。

方法3：添加HTML验证（提交时校验） #

如果只需要在表单提交时校验，可以给输入框加上pattern属性，指定合法格式：

<input type="number" pattern="-?\d+" required>

当用户提交表单时，浏览器会自动提示内容不符合格式，但无法实时阻止输入，适合对实时性要求不高的场景。

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