如何在生成输入时使输入字段可编辑

Question

我的表单上有多个输入字段，某些字段根据从其他输入字段获取的复杂数学运算生成数字。

示例输入字段

<td><input class="form-control inputField"  type="number" step="any" id="beUncorrectedGasRateWet" name="beUncorrectedGasRate[]" onblur="wetGasMeterRemake()" value="" ></td>

我想更改在该输入上生成的数学运算

 var tGasConsumption = document.getElementById("tGasConsumption70dry"); 

 var gConsumptionMath = 0;
 var tGasConsumptionMath = tGasConsumption;     

 if (gConsumption.value !="") gConsumptionMath = parseFloat(gConsumption.value); 
 if (tGasConsumption.value !="") tGasConsumptionMath = parseFloat(tGasConsumption.value); 

 var totalCunGasRate = ((gConsumptionMath / tGasConsumptionMath) *3600);                

 document.getElementById("unGasRate").value = totalCunGasRate;

我想要实现的是使输入字段可编辑，同时它还传播数字。当我尝试更改已经在 unGasRate 输入字段上传播的数字时，它不起作用，因为它回滚到它在 onblur 触发时已经传播的数字。

<td><input class="form-control inputField gasConsumption"  type="number" step="any" id ="gConsumption" name = "beGasConsumption[]" value="" ></td>
<td><input class="form-control editField gasConsumption" type="text default" id="tGasConsumption70dry" name="beTimeGasConsumption[]"  value="" readonly></td>

<td><input class="form-control inputField"  type="number" step="any" id="unGasRate" name="beUncorrectedGasRate[]" value="" ></td>

我试图做的是反转操作并执行类似 unGasRate/3600 的操作，这样我就可以在其他 2 个输入上获取输入编号，这些输入在 unGasRate 上传播结果，但它没有干得不错。

代码比这个大得多，但我更新了下面的问题演示。

calcRowWash = (function() {
  var gConsumption = document.getElementById("gConsumption");
  var tGasConsumption = document.getElementById("tGasConsumption");
  /*         var atmPressure = document.getElementById("atmPressure");
          var mPressire = document.getElementById("mPressire"); */


  var defaultMath = 0;
  var tGasConsumptionMath = tGasConsumption;

  if (gConsumption.value != "") defaultMath = parseFloat(gConsumption.value);
  if (tGasConsumption.value != "") tGasConsumptionMath = parseFloat(tGasConsumption.value);

  var totalC = ((defaultMath / tGasConsumptionMath) * 3600).toFixed(3);
  /*    var totalC2 = (288.15*(atmPressure + mPressire) / (1013.25*(273.15+G21))); */

  document.getElementById("unGasRate").value = totalC;

});

(G14)Burner Pressure: <br>
<input type="text" id="bPressure" name="bPressure" size="5" tabindex="13" /><br> (G15)Gas Consumption: <br>
<input type="text" id="gConsumption" name="gConsumption" size="5" tabindex="13" onblur="calcRowWash()" value="" maxlength="8" /><br> (G16)Time for Gas Consumption:<br>
<input type="text" id="tGasConsumption" name="tGasConsumption" size="5" tabindex="14" value="120" onblur="calcRowWash()" maxlength="8" /> <br> (G17)Uncorrected Gas Rate: <br>
<input type="text" id="unGasRate" name="unGasRate" size="5" tabindex="13" onblur="calcRowWash()" maxlength="8" /><br>
<!-- above is working fine! -->

<!-- below is not finished yet! -->
(G18)Meter Correction Factor:<br>
<input type="text" id="mCorrectionFactor" name="mCorrectionFactor" size="5" tabindex="13" onblur="calcRowWash()" value="" /><br> (G19)Atmospheric Pressure: <br>
<input type="text" id="atmPressure" name="atmPressure" size="5" tabindex="14" value="" /> <br> (G20)Meter Pressure: <br>
<input type="text" id="mPressire" name="mPressire" size="5" tabindex="13" onblur="calcRowWash()" /><br> (G21)Meter Temperature:<br>
<input type="text" id="mTemperature" name="mTemperature" size="5" tabindex="13" onblur="calcRowWash()" value="" /><br>

<!-- mathematical operation required** -->
(G22)Gas Volume Correction Factor:<br>
<input type="text" id="gVolCorrectionFactor" name="gVolCorrectionFactor" size="5" tabindex="14" value="" /> <br>

<!-- mathematical operation required** -->
(G23)Corrected Gas Rate:<br>
<input type="text" id="corGasRate" name="corGasRate" size="5" tabindex="13" onblur="calcRowWash()" /><br>

<!-- mathematical operation required** -->
(G24)Test Gas NET CV:<br>
<input type="text" id="TestGasNetCv" name="TestGasNetCv" size="5" tabindex="13" onblur="calcRowWash()" value="" /><br>

<!-- mathematical operation required** -->
(G25)ACTUAL NET HEAT INPUT:<br>
<input type="text" id="actNetHeatInput" name="actNetHeatInput" size="5" tabindex="14" value="" /> <br>

<!-- mathematical operation required** -->
(G26)Nominal NET Heat Input: <br>
<input type="text" id="devNominalNetHeatInp" name="devNominalNetHeatInp" size="5" tabindex="13" onblur="calcRowWash()" value="175" /><br>

<!-- mathematical operation required** -->
(G27)Deviation from Nominal NET Heat Input:<br>
<input type="text" id="devNominalNetHeatInp" name="devNominalNetHeatInp" size="5" tabindex="13" onblur="calcRowWash()" value="" /><br>

Answer 1

在运行你的逻辑之前测试哪个元素被模糊了。

首先，向 calcRowWash() 函数添加一个参数，因此它看起来像这样：

function calcRowWash = (function(ev) {

然后，检查 ev 的 target 成员变量的 ID 并更改逻辑以了解发生的情况：

if(ev.target.id === "unGasRate") { 

    //logic here based on event target

} else if (ev.target.id === "anotherElement") {

    //other logic for this field

} else if...

只需找出每个目标之间的区别，然后在其中编写特定代码，尽量不要重复您的代码。您可能想编写另一个函数来重复逻辑。

如何在生成输入时使输入字段可编辑

How to make input field editable while it generates an input

javascript

jquery

user-input

input

propagation