美元金额输入框无法修改值，操作时出现NaN问题求助

需求说明 #

我有一个默认值为$0.00的美元金额输入框，需求如下：

• 值必须始终带有小数部分，无小数时自动补.00
• 输入框必须包含$字符
• 禁止输入非货币值（如字母A-Z、特殊字符）
• 小数部分最多两位

当前问题 #

现有代码存在bug：删除数字时输入框值会变成NaN，之后虽能输入新数字，但只能输入单个数字，无法继续输入更多。

尝试过的无效代码 #

var decimalIndex = val.indexOf('.');
if (decimalIndex != -1) {
  var wholePart = val.substring(0, decimalIndex);
  var decimalPart = val.substring(decimalIndex + 1);
  if (wholePart.length > 0 && decimalPart.length == 0) {
    val = val.substring(0, decimalIndex) + '.' + val.substring(decimalIndex + 1);
  }
}

修复方案 #

核心问题是处理空值或非有效数字时的逻辑错误，以下是具体修改步骤：

1. 先过滤并提取有效数字部分 #

处理输入值时，先移除$和非数字/小数点的字符，同时限制小数点最多一个：

// 提取所有数字和第一个小数点
const rawValue = val.replace(/[^0-9.]/g, '');
const parts = rawValue.split('.');
const wholePart = parts[0] || '0';
const decimalPart = parts.length > 1 ? parts[1].slice(0, 2) : '00';

2. 处理删除到空的情况 #

当用户把所有数字都删除时，强制保留$0.00，避免出现NaN：

// 组装成标准格式
const formattedValue = `$${wholePart}.${decimalPart}`;

3. 完整可用的输入处理函数 #

替换原有错误的数值转换逻辑，直接通过字符串处理保证格式正确：

function formatCurrencyInput(input) {
  let val = input.value;
  // 移除$和非数字、非小数点字符
  const raw = val.replace(/[$]/g, '').replace(/[^0-9.]/g, '');
  
  // 分割整数和小数部分
  const dotIndex = raw.indexOf('.');
  let whole = '0';
  let decimal = '00';
  
  if (dotIndex === -1) {
    whole = raw || '0';
  } else {
    whole = raw.slice(0, dotIndex) || '0';
    decimal = raw.slice(dotIndex + 1, dotIndex + 3).padEnd(2, '0');
  }
  
  // 写入格式化后的值
  input.value = `$${whole}.${decimal}`;
}

// 绑定输入事件到输入框
document.querySelector('input').addEventListener('input', function(e) {
  formatCurrencyInput(e.target);
});

关键修复点 #

• 始终先过滤无效字符，确保只处理数字和单个小数点
• 用户删除所有数字时强制保留$0.00，避免空值或NaN
• 小数部分自动截取前两位并补0，保证始终两位小数
• 避免在输入中间状态下进行数值转换，直接用字符串处理保证格式稳定

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