type=number输入框Firefox允许特殊字符，如何实现跨浏览器仅数字输入

问题现象 #

• 带type="number"属性的输入框在Chrome、Edge浏览器中输入拦截逻辑表现正常，但在Firefox浏览器中可输入特殊字符，存在拦截绕过问题
• 业务明确要求该输入框仅允许用户输入纯数字，需完全拦截所有特殊字符、英文字母类非数字输入
• 现有页面实现的校验逻辑存在跨浏览器漏洞，无法满足统一的输入约束要求

现有实现代码 #

输入框模板代码 #

<input 
  type="number" 
  name="height" 
  class="form-control input-number"  
  ng-model="height" 
  tabindex="11" 
  min="0" 
  data-ng-pattern="/^[0-9]{1,10}$/" 
  data-ng-keydown="checkForNumber($event)"
>

现有校验JS实现 #

$scope.checkForNumber = function(event) {
  if (
    (event.keyCode >= 48 && event.keyCode <= 57) 
    || (event.keyCode >= 96 && event.keyCode <= 105) 
    || event.keyCode == 8 
    || event.keyCode == 9 
    || event.keyCode == 37 
    || event.keyCode == 39 
    || event.keyCode == 46 
    || event.keyCode == 190
  ) {
    // 放行允许输入的内容
  } else {
    event.preventDefault();
  }
};

兼容问题根因 #

• 原校验逻辑使用已废弃的event.keyCode属性作为判断基准，不同浏览器对特殊字符的keyCode映射规则不统一，是跨浏览器拦截失效的核心原因
• Firefox对type="number"输入框的默认行为允许输入e、+、-、.等字符，配合keyCode映射的差异，原拦截逻辑无法覆盖这部分输入
• 原逻辑仅依赖keydown事件做拦截，没有覆盖粘贴输入、拖拽文本入框、输入法输入等非按键触发的输入场景，存在绕过漏洞
• 原逻辑中单独放行的小数点键（对应keyCode 190），和现有data-ng-pattern要求的1-10位纯数字规则冲突，本身不符合业务要求

调整后实现方案 #

1. 优化按键拦截逻辑 #

替换原checkForNumber函数，改用浏览器统一支持的event.key属性做判断，删除多余的小数点放行规则，统一不同浏览器的拦截行为：

$scope.checkForNumber = function(event) {
  // 允许放行的功能键集合：退格、Tab、左右方向键、删除键
  const allowedFuncKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete'];
  // 纯数字字符直接放行
  if (/^[0-9]$/.test(event.key)) return;
  // 合规功能键直接放行
  if (allowedFuncKeys.includes(event.key)) return;
  // 其余所有输入一律拦截
  event.preventDefault();
};

2. 增加兜底输入清洗逻辑 #

补充ng-change事件绑定，对用户粘贴、输入法输入等非按键触发的内容做实时清洗，从根源上确保最终存储的模型值完全符合纯数字规则：

$scope.cleanHeightInput = function() {
  // 剔除所有非数字字符，仅保留0-9范围内的内容
  $scope.height = $scope.height ? $scope.height.replace(/[^0-9]/g, '') : '';
};

3. 模板代码调整 #

对应调整输入框的属性绑定：

<input 
  type="text" 
  name="height" 
  class="form-control input-number"  
  ng-model="height" 
  tabindex="11" 
  data-ng-pattern="/^[0-9]{1,10}$/" 
  data-ng-keydown="checkForNumber($event)"
  data-ng-change="cleanHeightInput()"
>

注：如果业务必须保留type="number"的原生表现，可保留原有type属性，配合上述双层校验逻辑，即可覆盖所有输入场景的拦截要求，不需要强制修改type值

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