JavaScript总账应用：输入框动态转两位小数实现方案问询

嘿，我刚好有个完美适配你需求的方案，不用依赖jQuery或者mathjs，原生JavaScript就能轻松搞定！核心思路是把用户输入的数字当成分来处理，再转换为以元为单位的两位小数格式，完全符合你要的效果：输入"1"显示"0.01"，输入"123"显示"1.23"这类逻辑。

具体实现代码 #

首先是HTML部分，一个普通的文本输入框：

<input type="text" id="amountInput" placeholder="请输入数字..." />

然后是JavaScript逻辑，我推荐用input事件（比keyup更全面，能覆盖粘贴、右键输入等场景）：

const amountInput = document.getElementById('amountInput');

amountInput.addEventListener('input', function(e) {
  // 第一步：过滤掉所有非数字字符，确保输入纯数字
  const rawNumbers = e.target.value.replace(/\D/g, '');
  
  // 处理空输入的情况，默认显示0.00
  if (!rawNumbers) {
    e.target.value = '0.00';
    return;
  }
  
  // 核心转换：把输入的数字视为"分"，除以100得到"元"，再格式化两位小数
  const formattedAmount = (parseInt(rawNumbers, 10) / 100).toFixed(2);
  
  // 更新输入框显示值
  e.target.value = formattedAmount;
});

代码解释 #

• 过滤非数字：用正则/\D/g把所有非数字字符去掉，避免用户输入字母、符号导致格式错乱；
• 空值处理：如果用户删除所有内容，输入框自动显示0.00，保持格式统一；
• 核心转换：把输入的数字字符串转成整数后除以100，相当于把“分”转成“元”，再用toFixed(2)强制保留两位小数，自动补零；

测试效果 #

你可以直接测试这些场景：

• 输入1 → 显示0.01
• 输入12 → 显示0.12
• 输入123 → 显示1.23
• 输入1234 → 显示12.34
• 输入123456 → 显示1234.56

如果需要兼容keyup事件，只需要把addEventListener里的'input'换成'keyup'就行，但还是更推荐input事件，覆盖的输入场景更全。

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