如何用jQuery/JS实现输入时自动格式化货币：千分位+两位小数

嘿，我刚好做过类似的价格输入格式化需求，给你一个完整的解决方案，完美解决你遇到的小数点输入问题和非法字符过滤问题！

要同时满足过滤非法字符、支持小数点输入、千分位分隔和保留两位小数这几个需求，我们需要分步骤处理输入内容：

• 先过滤掉所有非数字和非小数点的字符，只保留有效输入
• 限制最多只能有一个小数点，避免出现多个小数点的无效格式
• 截断小数点后的位数，确保最多保留两位
• 给整数部分添加千分位分隔符
• 实时监听输入事件，动态更新格式化后的内容

HTML部分 #

先创建一个基础的文本输入框：

<input type="text" id="priceInput" placeholder="请输入商品价格">

JavaScript部分 #

通过监听输入事件，实时处理并格式化输入内容：

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

priceInput.addEventListener('input', function(e) {
  // 1. 过滤所有非数字和非小数点的字符
  let inputValue = e.target.value.replace(/[^0-9.]/g, '');
  
  // 2. 处理多个小数点的情况：只保留第一个小数点，后续的小数点全部移除
  const firstDotIndex = inputValue.indexOf('.');
  if (firstDotIndex !== -1) {
    inputValue = inputValue.slice(0, firstDotIndex + 1) + inputValue.slice(firstDotIndex + 1).replace(/\./g, '');
  }
  
  // 3. 分割整数部分和小数部分
  let [integerPart, decimalPart] = inputValue.split('.');
  
  // 4. 处理小数部分：最多保留两位，没有则补0；超过两位则截断
  decimalPart = decimalPart ? decimalPart.slice(0, 2) : '00';
  
  // 5. 给整数部分添加千分位分隔符（空值时显示0）
  if (integerPart) {
    integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  } else {
    integerPart = '0';
  }
  
  // 6. 拼接最终格式化后的内容
  const formattedValue = `${integerPart}.${decimalPart}`;
  
  // 7. 修复光标位置问题：避免格式化后光标跳到末尾，提升输入体验
  const cursorOffset = formattedValue.length - e.target.value.length;
  const originalCursorPos = e.target.selectionStart;
  e.target.value = formattedValue;
  e.target.setSelectionRange(originalCursorPos + cursorOffset, originalCursorPos + cursorOffset);
});

当你输入1234560ABC.5665时，代码会自动完成以下处理：

1. 过滤掉ABC等非法字符，得到1234560.5665
2. 截断小数点后超过两位的部分，得到1234560.56
3. 给整数部分添加千分位分隔符，最终显示1,234,560.56

同时你可以正常输入小数点，且不会出现多个小数点的情况，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Teshan N.