contenteditable DIV中keyup事件数字加逗号功能异常（反向生效）求助

你的代码核心问题是修改文本后没有维护光标位置，导致光标自动回到内容开头，后续输入的数字会被添加在最前面，看起来像是数字和千分位格式都反向了。以下是修正后的完整代码：

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true">0</div>

CSS #

div{
background-color:#ccc;
padding:5px;
border:1px dashed #000;
width:20%;
}

JavaScript #

function addCommas(x) {
  // 处理空或非数字情况
  if (!x) return '0';
  var parts = x.toString().split(".");
  // 整数部分添加千分位
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  // 小数部分只保留最多两位（可选，根据需求调整）
  if (parts[1]) {
    parts[1] = parts[1].slice(0, 2);
  }
  return parts.join(".");
}

$('div').keyup(function (){
  var $el = $(this);
  var currentText = $el.text();
  
  // 1. 保存当前光标位置
  var selection = window.getSelection();
  var cursorPos = selection.getRangeAt(0).startOffset;
  // 计算光标位置需要调整的偏移量（因为要替换逗号）
  var commaCountBefore = (currentText.slice(0, cursorPos).match(/,/g) || []).length;

  // 2. 清理非数字和非法字符，只保留数字和小数点
  var cleanedText = currentText.replace(/[^0-9.]/g, '');
  // 确保只有一个小数点
  cleanedText = cleanedText.replace(/(\..*)\./g, '$1');

  // 3. 添加千分位格式
  var formattedText = addCommas(cleanedText);

  // 4. 设置处理后的文本
  $el.text(formattedText);

  // 5. 恢复光标位置，调整因逗号添加导致的偏移
  var commaCountAfter = (formattedText.slice(0, cursorPos).match(/,/g) || []).length;
  var newCursorPos = cursorPos + (commaCountAfter - commaCountBefore);
  // 确保光标位置不超出文本长度
  newCursorPos = Math.min(newCursorPos, formattedText.length);
  
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart($el[0].firstChild, newCursorPos);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
})

关键修复点： #

• 光标位置维护：修改文本前记录光标位置，处理后根据添加的逗号数量调整光标位置，确保光标始终在用户输入的位置，避免跑到开头导致输入反向。
• 优化字符清理：只保留数字和单个小数点，避免重复清理逻辑。
• 增强鲁棒性：处理空值和小数部分的长度限制（可根据需求调整小数位数）。

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