如何用JavaScript实现十进制金额从右往左输入填充及删除功能

这个需求完全可以实现。你现有代码的问题在于仅通过数值大小判断输入状态、没有区分新增/删除操作、强制保留两位小数的逻辑不适配删除场景，调整核心实现逻辑即可完成。

核心实现思路 #

不要依赖格式化后的数值做计算，改为存储用户输入的有效数字序列，所有操作（新增/删除）先更新这个序列，再按需格式化输出，从根源避免计算和判断误差。

调整后代码示例 #

// 存储用户输入的所有有效数字序列
let inputDigits = '';

const formatTip = (rawValue) => {
  // 提取输入内容中的纯数字
  const newDigits = rawValue.replace(/\D/g, '');

  // 区分新增和删除操作
  if (newDigits.length > inputDigits.length) {
    // 新增数字，取最后一位拼入序列
    inputDigits += newDigits.slice(-1);
  } else {
    // 删除操作，截断序列到对应长度
    inputDigits = inputDigits.slice(0, newDigits.length);
  }

  // 按规则格式化输出，完全匹配你的交互要求
  const len = inputDigits.length;
  if (len === 0) return '$0.00';
  if (len === 1) return `$0.0${inputDigits}`;
  if (len === 2) return `$0.${inputDigits}`;
  if (len === 3) return `$${inputDigits[0]}.${inputDigits[1]}${inputDigits[2]}`;
  if (len === 4) return `$${inputDigits[0]}${inputDigits[1]}.${inputDigits[2]}${inputDigits[3]}`;
  if (len >=5) {
    const intPart = inputDigits.slice(0, len-2);
    const decimalPart = inputDigits.slice(len-2);
    // 处理删除后的小数位省略逻辑
    if (decimalPart[1] === '0') {
      return decimalPart[0] === '0' ? `$${intPart}` : `$${intPart}.${decimalPart[0]}`;
    }
    return `$${intPart}.${decimalPart}`;
  }
}

调用逻辑修改为：

const tipString = formatTip(e?.target?.value?.trim() || '');

场景验证 #

完全匹配你给出的交互要求：

• 输入1 → 序列为1 → 输出$0.01
• 再输入2 → 序列为12 → 输出$0.12
• 依次输入3、4、5 → 序列为12345 → 输出$123.45
• 删除末尾5 → 序列截断为1234 → 小数位最后一位补0省略 → 输出$123.4
• 再删除4 → 序列截断为123 → 小数位全部省略 → 输出$123
• 再输入2 → 序列为1232 → 保留一位小数 → 输出$123.2

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