如何在数字输入框输入时实时显示计算结果？（需遵循指定逻辑）

没问题，我来帮你搞定这个实时计算的需求！下面分别给你纯JavaScript和jQuery两种实现方式，都能满足输入数字时实时更新总和的效果。

纯JavaScript实现 #

核心思路是监听所有目标数字输入框的input事件（输入内容变化时实时触发），每次触发就遍历输入框、累加数值，最后把结果赋值给总和输入框。另外建议把总和输入框设为只读，避免用户手动修改：

<input type="number" class="calc-input">
<input type="number" class="calc-input">
<input type="number" class="calc-input">
<input type="number" class="calc-input">
<label for="total">Total:</label>
<input class="total" id="total" type="number" name="test" readonly>

<script type="text/javascript">
// 获取所有需要计算的输入框和总和输入框
const calcInputs = document.querySelectorAll('.calc-input');
const totalInput = document.querySelector('#total');

// 定义计算总和的函数
function calculateTotal() {
  let total = 0;
  calcInputs.forEach(input => {
    // 处理空值，把空输入当成0计算
    total += Number(input.value) || 0;
  });
  totalInput.value = total;
}

// 给每个输入框绑定input事件，实时计算
calcInputs.forEach(input => {
  input.addEventListener('input', calculateTotal);
});

// 页面加载时先计算一次初始值
calculateTotal();
</script>

jQuery实现 #

如果你的项目已经引入了jQuery，也可以用更简洁的写法：

<input type="number" class="calc-input">
<input type="number" class="calc-input">
<input type="number" class="calc-input">
<input type="number" class="calc-input">
<label for="total">Total:</label>
<input class="total" id="total" type="number" name="test" readonly>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function calculateTotal() {
  let total = 0;
  $('.calc-input').each(function() {
    total += Number($(this).val()) || 0;
  });
  $('#total').val(total);
}

// 绑定事件
$('.calc-input').on('input', calculateTotal);

// 初始计算
calculateTotal();
</script>

关键细节说明 #

• 用class="calc-input"区分需要计算的输入框，避免把总和输入框也纳入计算范围，逻辑更清晰。
• 处理了输入框为空的情况：Number(input.value) || 0，确保空值不会导致NaN的问题。
• 给总和输入框添加readonly属性，防止用户手动修改结果，保证数据一致性。

内容的提问来源于stack exchange，提问作者J.Z