金额格式化代码Chrome正常运行，Safari中checkAmount函数失效求助

算力阿峰

2026-7-8

问题分析与解决方案

问题根源

你的checkAmount函数在Safari中失效，核心原因是Safari与Chrome对onchange事件的触发逻辑存在差异：

Chrome中，输入框内容修改后，部分场景下无需失焦也会触发onchange；
Safari中，onchange仅在输入框失去焦点且内容发生变化时才会触发，若测试时未让输入框失焦，函数就不会执行。

另外原代码里numberWithCommas函数通过document.getElementById(field.id)获取元素属于冗余操作，直接使用传入的field参数即可。

解决方案

1. 替换事件触发方式（推荐）

将onchange替换为oninput事件，输入框内容每发生一次变化就会立即触发checkAmount，无需等待失焦：

<input type="text" maxlength="12" name="m_currency" id="m_currency" class="currency" onkeyup="numberWithCommas(this)" oninput="checkAmount()">

2. 优化函数逻辑

简化numberWithCommas函数，减少冗余DOM操作，同时提升checkAmount的鲁棒性：

function numberWithCommas(field) {
  // 移除所有逗号和多余负号
  let amount = field.value.replace(/,/g, "").replace(/-/g, "");
  // 保留原始输入的负号（如果存在）
  if (field.value.startsWith("-")) {
    amount = "-" + amount;
  }
  // 添加千分位逗号
  field.value = amount.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function checkAmount() {
  const element = document.getElementById("m_currency");
  // 防止元素不存在导致报错
  if (!element) return;
  const newamount = element.value.replace(/,/g, "");
  console.log(newamount);
}

3. 强制触发change事件（可选）

若坚持使用onchange，可以在numberWithCommas修改完value后手动触发change事件：

function numberWithCommas(field) {
  // ... 原有逻辑 ...
  field.value = amount.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  // 手动触发change事件
  field.dispatchEvent(new Event('change'));
}