Firefox下input type=number自动去前缀零及小数格式异常问题咨询

这确实是Firefox（以及多数现代浏览器）对type="number"输入框的默认行为——这类输入框的设计初衷是处理纯数值输入，而非格式化后的文本展示。浏览器会自动将输入值解析为数字类型，因此会做标准化处理：

• 去掉整数部分的前导零（比如输入08会被解析为8）
• 去掉小数部分末尾的多余零（比如100.00会变成100或100.0，取决于浏览器的解析逻辑）
• 自动省略小数部分的前导零（比如.08会被显示为.8）

它不会区分你的使用场景是货币还是普通小数，只会按纯数字的规则处理。

修复方案 #

如果需要精确控制显示格式（比如货币要保留两位小数），可以参考以下两种思路：

1. 改用type="text"配合JavaScript实现（推荐）

这种方式能完全掌控输入的显示格式和验证逻辑，同时支持自定义场景（货币/小数）：

<!-- 货币输入框（带$符号，强制两位小数） -->
<div>
  <span>$</span>
  <input type="text" id="currencyInput" value="100.00">
</div>

<!-- 小数输入框（保留两位小数，允许前导零） -->
<input type="text" id="decimalInput" value="0.08">

<script>
// 货币输入框：失去焦点时格式化
document.getElementById('currencyInput').addEventListener('blur', function(e) {
  const rawValue = e.target.value.replace(/[^0-9.]/g, '');
  const num = parseFloat(rawValue);
  if (!isNaN(num)) {
    // 强制保留两位小数
    e.target.value = num.toFixed(2);
  }
});

// 小数输入框：失去焦点时格式化
document.getElementById('decimalInput').addEventListener('blur', function(e) {
  const num = parseFloat(e.target.value);
  if (!isNaN(num)) {
    e.target.value = num.toFixed(2);
  }
});

// 输入时限制合法字符（可选）
document.getElementById('currencyInput').addEventListener('input', function(e) {
  e.target.value = e.target.value.replace(/[^0-9.]/g, '');
});
</script>

2. 保留type="number"，用JS补充格式（有局限性）

如果需要保留数字输入框的原生特性（比如上下箭头调节数值），可以通过监听blur事件手动补全格式，但要注意：当用户再次聚焦输入框时，浏览器可能会重新标准化数值，导致格式被重置：

<div>
  <span>$</span>
  <input type="number" id="numberCurrency" value="100.00">
</div>

<script>
document.getElementById('numberCurrency').addEventListener('blur', function(e) {
  const num = parseFloat(e.target.value);
  if (!isNaN(num)) {
    // 强制设置为两位小数
    e.target.value = num.toFixed(2);
  }
});
</script>

总结 #

type="number"的自动格式化是浏览器的默认行为，无法通过纯HTML修改。如果需要适配货币这类有特定格式要求的场景，优先选择type="text"配合JavaScript的方案，能更好地满足自定义格式和验证需求。

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