本文详解如何通过原生 javascript 实现两个数字输入框（num1、num2）内容变更时，自动将它们的和实时显示在第三个输入框（res）中，全程无需点击按钮，响应及时、健壮容错。
本文详解如何通过原生 javascript 实现两个数字输入框（num1、num2）内容变更时，自动将它们的和实时显示在第三个输入框（res）中，全程无需点击按钮，响应及时、健壮容错。
在表单交互开发中，实时计算（如金额累加、数量汇总）是高频需求。要让 input 3 自动显示 input 1 与 input 2 的实时和，关键在于：监听输入事件 + 安全数值转换 + 正确赋值目标。以下为完整、生产可用的实现方案。
✅ 核心实现逻辑
- 使用 oninput 事件（而非 onchange 或 keyup），确保用户每输入/删除/粘贴一个字符时都触发计算，支持鼠标拖拽修改、粘贴、清空等所有操作；
- 在 JS 函数中对输入值进行 parseInt() 转换，并用 isNaN() 做容错处理——若输入为空、非数字或非法字符（如 "abc"、"5.8"），统一视为 0，避免 NaN 污染结果；
- 注意：目标输入框应使用 .value = z 赋值（而非 .innerHTML），因为 <input> 是自闭合表单控件，不支持 innerHTML；错误写法会导致计算无反应。
? 完整代码示例
<div class="inputs">
<div class="input-box">
<label for="num1" class="details">number 1</label>
<input type="number" name="num1" class="form-control" id="num1"
oninput="calculateSum()"
value="<?php echo htmlspecialchars($num1 ?? '0'); ?>"
placeholder="0" aria-describedby="emailHelp">
</div>
<div class="input-box">
<label for="num2" class="details">number 2</label>
<input type="number" name="num2" class="form-control" id="num2"
oninput="calculateSum()"
value="<?php echo htmlspecialchars($num2 ?? '0'); ?>"
placeholder="0" aria-describedby="emailHelp">
</div>
<div class="input-box">
<label for="res" class="details">result</label>
<input type="number" name="res" class="form-control" id="res"
value="<?php echo htmlspecialchars($res ?? '0'); ?>"
placeholder="0" aria-describedby="emailHelp" readonly>
</div>
</div>
<script>
function calculateSum() {
const input1 = document.getElementById('num1').value;
const input2 = document.getElementById('num2').value;
// 安全解析：空值、无效值均转为 0
const num1 = isNaN(parseInt(input1)) ? 0 : parseInt(input1);
const num2 = isNaN(parseInt(input2)) ? 0 : parseInt(input2);
const sum = num1 + num2;
document.getElementById('res').value = sum;
}
</script>⚠️ 关键注意事项
- readonly 属性推荐添加：为 #res 输入框添加 readonly（如上所示），防止用户手动修改结果，保证数据一致性；
- PHP 输出需转义：服务端变量（如 $num1）务必通过 htmlspecialchars() 输出，防止 XSS 风险；
- type="number" 的局限性：虽然浏览器会限制部分非法输入，但用户仍可能粘贴非数字内容（如 "12a"），因此前端容错（isNaN 判断）必不可少；
- 性能无忧：oninput 触发频率高，但本例计算极轻量，无需防抖（debounce）；如后续扩展复杂逻辑（如远程校验），再考虑优化。
✅ 总结
该方案以最小侵入方式实现“所见即所得”的实时求和：绑定 oninput、健壮解析、正确赋值、安全输出。它兼容现代浏览器，不依赖任何框架，可直接集成于 PHP、Laravel、Django 等后端模板中，是表单自动化计算的经典实践范式。
