如何用JQuery实时计算HTML输入框数值并自动显示结果

希望在HTML表单的price（价格）和amount（数量）输入框中输入数值时，total（总价）输入框能自动计算并显示结果（例如输入价格3、数量5时，总价自动显示15）。

现有计算代码如下：

var p1 = $('#price').val();
var p2 = $('#amount').val();
$('#total').val(p1*p2);
console.log()

但该代码无法实时显示结果，仅在页面刷新后生效，请问如何用JQuery实现实时计算？

附表单代码：

<div class="col-sm-4">
  <form>
    <div class="mb-3">
      <label for="">Price</label>
      <input type="text" id="price" required class="price form-control">
    </div>
    <div class="mb-3">
      <label for="">Amount</label>
      <input type="text" id="amount" required class="amount form-control">
    </div>
    <div class="mb-3">
      <label for="">Total</label>
      <input type="text" id="total" required class="total form-control">
    </div>
    <button type="submit" class="btn btn-primary marketbuy">Buy </button>
  </form>
</div>

要实现实时计算，核心是给价格和数量输入框绑定实时触发的事件，并在事件回调中执行计算逻辑。以下是具体实现：

完整代码 #

$(document).ready(function() {
  // 封装计算逻辑为函数，方便复用
  function calculateTotal() {
    // 获取输入值并转为数字，空值/非数字则默认0
    const price = parseFloat($('#price').val()) || 0;
    const amount = parseFloat($('#amount').val()) || 0;
    // 计算总价并赋值
    $('#total').val(price * amount);
  }

  // 给price和amount绑定input事件，实时触发计算
  $('#price, #amount').on('input', calculateTotal);
});

关键细节 #

• 事件选择：使用input事件而非keyup，因为input能响应所有输入操作（包括粘贴、输入法输入、鼠标操作等），确保内容变化立即触发计算。
• 数值处理：用parseFloat()将输入的字符串转为数值，搭配|| 0处理空值或非数字输入，避免出现NaN的无效结果。
• DOM就绪：代码包裹在$(document).ready()中，确保页面DOM元素加载完成后再绑定事件，防止找不到元素的问题。

优化建议 #

将总价输入框设置为只读，避免用户手动修改：

<input type="text" id="total" required class="total form-control" readonly>

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