动态添加行场景下，keyup事件处理文本框值变更及合计的问题

这个问题我之前也碰到过！核心矛盾在于你直接在keyup事件里修改输入框值时，会强制重置光标位置，而且实时修正会打断用户的输入节奏——用户刚输入一个中间值（比如1.3），就被立刻改成1.5，自然会觉得输入被“强制拉回”修正后的值。而blur事件是在用户输入完、离开输入框时才处理，所以不会有这个冲突。

下面给你一套完整的解决方案，兼顾实时更新和良好的用户体验：

第一步：封装核心逻辑函数 #

先把值修正和总计计算的逻辑抽成独立函数，方便复用和维护：

// 将输入值向上取整到0.25的倍数
function roundUpToQuarter(inputValue) {
  const num = parseFloat(inputValue);
  if (isNaN(num)) return 0;
  // 向上取整核心逻辑：乘以4取整后再除以4
  return Math.ceil(num * 4) / 4;
}

// 计算所有周一输入框的总和
function calculateMondayTotal() {
  const totalBox = document.querySelector('#total-monday'); // 替换成你的总计框选择器
  let total = 0;
  
  // 遍历所有周一输入框累加值
  document.querySelectorAll('.monday-input').forEach(input => {
    const value = parseFloat(input.value) || 0;
    total += value;
  });
  
  // 格式化后显示到总计框
  totalBox.value = total.toFixed(2);
}

第二步：优化keyup事件处理——防抖+光标位置恢复 #

直接在keyup里实时修正会打断输入，所以我们用防抖函数让修正逻辑延迟执行（比如用户暂停输入300ms后再处理），同时修正值时要保存并恢复光标位置，避免光标跳走影响体验：

// 防抖函数：避免频繁触发处理逻辑，提升输入流畅度
function debounce(func, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 处理周一输入框的keyup事件
const handleMondayInput = debounce(function(e) {
  const input = e.target;
  let currentValue = input.value.trim();
  
  // 处理空输入的情况
  if (!currentValue) {
    input.value = '';
    calculateMondayTotal();
    return;
  }
  
  // 验证是否为有效数字
  const num = parseFloat(currentValue);
  if (isNaN(num)) {
    input.value = ''; // 非数字可清空，也可根据需求保留合法部分
    calculateMondayTotal();
    return;
  }
  
  // 保存当前光标位置（关键！避免修正后光标乱跳）
  const cursorPosition = input.selectionStart;
  
  // 计算修正后的值并格式化
  const correctedValue = roundUpToQuarter(num);
  const formattedValue = correctedValue.toFixed(2);
  
  // 仅当修正后的值和当前输入值不同时才更新，避免无意义的光标重置
  if (formattedValue !== currentValue) {
    input.value = formattedValue;
    
    // 恢复光标位置（如果修正后字符串长度变化，要调整光标位置）
    const newCursorPos = cursorPosition + (formattedValue.length - currentValue.length);
    input.setSelectionRange(newCursorPos, newCursorPos);
  }
  
  // 更新总计
  calculateMondayTotal();
});

第三步：绑定事件（含动态插入的行） #

给现有输入框绑定事件，同时别忘了动态插入新行时，要给新的周一输入框也绑定事件：

// 给现有周一输入框绑定keyup事件
document.querySelectorAll('.monday-input').forEach(input => {
  input.addEventListener('keyup', handleMondayInput);
});

// 假设你动态插入行的函数是这样的，记得给新输入框绑定事件
function addNewRow() {
  const table = document.querySelector('#your-table'); // 替换成你的表格选择器
  const newRow = document.createElement('tr');
  
  // 创建周一输入框单元格
  const mondayCell = document.createElement('td');
  const newInput = document.createElement('input');
  newInput.className = 'monday-input';
  newInput.type = 'number'; // 建议用number类型输入框，限制输入内容
  mondayCell.appendChild(newInput);
  
  newRow.appendChild(mondayCell);
  table.appendChild(newRow);
  
  // 给新输入框绑定事件
  newInput.addEventListener('keyup', handleMondayInput);
}

为什么之前的问题会出现？ #

你之前直接在keyup里修改input.value，会触发输入框重绘，光标会被强制重置到末尾，而且实时修正会打断用户的输入节奏——比如用户刚输入1.3，立刻被改成1.5，自然会觉得输入被“拉回”。而按住删除键时，每次删除后的值可能刚好符合规则（比如删除到1.0），所以看起来正常。

用防抖+光标恢复的方案，既实现了实时更新的需求，又不会打断用户的输入体验：用户输入时不会被强制修正，只有暂停输入后才会自动调整到符合规则的值，同时光标位置也不会乱跳。

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