如何让表单内自动生成计算值的input字段可编辑且触发onblur不回退原值

核心逻辑是区分自动计算触发场景，增加手动修改标记避免自动覆盖，具体修改步骤如下： #

步骤1：修改HTML绑定规则 #

仅给用来生成计算结果的上游输入字段保留onblur="calcRowWash()"触发逻辑，删除所有结果输出字段（比如unGasRate）的onblur绑定，避免结果字段失焦时触发重算：

<!-- 上游依赖字段保留触发逻辑 -->
<input type="text" id="gConsumption" name="gConsumption" size="5" tabindex="13" onblur="calcRowWash()" value="" maxlength="8" />
<input type="text" id="tGasConsumption" name="tGasConsumption" size="5" tabindex="14" value="120" onblur="calcRowWash()" maxlength="8" />

<!-- 结果字段删除onblur绑定 -->
<input type="text" id="unGasRate" name="unGasRate" size="5" tabindex="13" maxlength="8" />

步骤2：增加手动修改状态标记 #

给结果字段添加监听，用户手动输入时标记为已手动修改：

document.getElementById('unGasRate').addEventListener('input', function() {
  // 自定义属性标记是否被用户手动修改
  this.dataset.manualModified = 'true';
});

步骤3：修改计算函数逻辑 #

调整calcRowWash，仅当字段未被手动修改时才自动赋值，上游字段触发计算时重置标记：

calcRowWash = (function() {
  const gConsumption = document.getElementById("gConsumption");
  const tGasConsumption = document.getElementById("tGasConsumption");
  const unGasRateEl = document.getElementById("unGasRate");

  // 上游字段触发计算，重置手动修改标记，允许更新结果
  unGasRateEl.dataset.manualModified = 'false';

  let defaultMath = 0;
  let tGasConsumptionMath = 0;
  if (gConsumption.value.trim()) defaultMath = parseFloat(gConsumption.value);
  if (tGasConsumption.value.trim()) tGasConsumptionMath = parseFloat(tGasConsumption.value);
  
  // 避免除以0报错
  if (tGasConsumptionMath === 0) return;

  const totalC = ((defaultMath / tGasConsumptionMath) * 3600).toFixed(3);
  // 仅未被手动修改时赋值
  if (unGasRateEl.dataset.manualModified !== 'true') {
    unGasRateEl.value = totalC;
  }
});

后续其他计算字段适配 #

你后续需要开发的corGasRate、actNetHeatInput等可手动编辑的计算字段，都可以复用该逻辑：

• 对应字段删除onblur触发计算的绑定
• 添加input事件监听标记手动修改状态
• 计算函数中增加标记判断后再赋值
  该方案不需要做复杂的反向运算，就能实现：

1. 上游输入字段修改时，自动更新结果字段
2. 手动修改结果字段后，只要上游输入不变，结果会一直保留手动值，不会被自动计算覆盖

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