Angular中type="number"输入框Chrome正常Firefox可输入非数字，求原生解决方案

为什么type="number"在火狐表现不一致 #

HTML规范中type="number"的设计定位是辅助输入数字类型值，而非严格拦截所有非数字输入。规范允许浏览器保留用户输入临时非数字字符的能力，仅在表单提交阶段做值校验，因此Chrome、Firefox的实现逻辑有差异属于正常情况。

推荐原生方案（无额外依赖，兼容所有现代浏览器） #

方案1：属性组合方案（无JS逻辑，适合仅需表单校验的场景） #

直接给input设置以下原生属性即可，无需额外编写TS/JS逻辑：

• inputmode="numeric"：告知浏览器优先弹出数字输入键盘，同时提示输入上下文为数字场景
• pattern="[0-9]*"：原生表单校验规则，提交时自动校验值是否为纯数字
• required（可选）：如果该字段为必填项可以追加

<input type="text" inputmode="numeric" pattern="[0-9]*" placeholder="请输入数字">

该方案不会拦截非数字输入，但会在表单提交时自动阻断非法值提交，适合对输入拦截要求不高的场景。

方案2：beforeinput事件拦截方案（适合需要实时拦截非数字输入的场景） #

beforeinput是W3C标准原生事件，会在输入内容写入输入框之前触发，拦截逻辑轻量且兼容性覆盖所有现代浏览器：

1. 模板代码：

<input 
  type="text"
  inputmode="numeric"
  (beforeinput)="handleNumberInput($event)"
  placeholder="请输入数字"
>

2. 组件TS代码：

handleNumberInput(event: InputEvent) {
  // 仅拦截非数字的输入内容，保留删除、退格、方向键等控制操作能力
  if (event.data && !/^\d+$/.test(event.data)) {
    event.preventDefault();
  }
}

如果需要支持小数输入，只需把正则调整为/^\d*\.?\d*$/即可。

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