### [HTML 表单实时计算：用 input 事件驱动](https://www.huociguo.com/article/1765)

**Published:** 2026-10-02T09:58:12

**Author:** 米了

**Excerpt:** 报价器、购物车这类表单，输入数字的同时总价跟着变。实现的关键不在计算逻辑，在事件选型与更新方式。 输入即计算，…

报价器、购物车这类表单，输入数字的同时总价跟着变。实现的关键不在计算逻辑，在事件选型与更新方式。

![桌面上的计算器](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-5921494.jpeg)

输入即计算，结果即时回显。图片来自 Pexels。

## 第一步：绑 input 事件

用 input 事件而不是 change。change 要等失焦才触发，输入过程中没有任何反馈，实时性靠 input 保证。

form.addEventListener('input', updateTotal);

绑在 form 上做事件委托，新增输入项不需要补绑定。

## 第二步：安全转数字

const n = parseFloat(input.value) || 0;

空串、非数字内容转换后是 NaN，直接进入求和会污染全部结果。短路或运算把非法值归零。

## 第三步：统一入口

function updateTotal() {
  let sum = 0;
  form.querySelectorAll('\[data-price\]').forEach(el => {
    sum += (parseFloat(el.value) || 0) \* Number(el.dataset.price);
  });
  total.textContent = sum.toFixed(2);
}

所有联动计算收进同一个函数，任何字段变化都走这一个入口，逻辑只有一份。

## 两个细节

其一，高频输入场景加五十毫秒以内的防抖，连续击键合并成一次计算，手感不受影响。

其二，结果用 textContent 写回，不用 innerHTML。计算结果拼进 HTML 字符串既多余又引入注入面。

精度敏感场景把金额换算成整数分再求和，显示前再除回来，浮点误差从源头绕开。

**Tags:** DOM操作, input事件, 实时计算, 表单提交, 防抖

**Categories:** HTML5

---