本文介绍如何通过原生 javascript 实现两个数字输入框的实时求和，并将结果自动同步至第三个输入框，全程无需点击按钮，支持空值、非法输入容错及页面加载时的初始值保留。
本文介绍如何通过原生 javascript 实现两个数字输入框的实时求和，并将结果自动同步至第三个输入框，全程无需点击按钮，支持空值、非法输入容错及页面加载时的初始值保留。
在表单开发中，常需实现「输入即响应」的交互逻辑，例如将两个数值输入框（num1 和 num2）的和实时显示在第三个只读/可编辑输入框（res）中。关键在于：监听输入变化、安全解析数值、及时更新目标字段，而非依赖按钮触发。
✅ 正确实现步骤
- 绑定 oninput 事件：该事件在 值发生任何变化（包括粘贴、键盘输入、上下箭头调整）时立即触发，比 onchange 或 keyup 更可靠；
- 使用 .value 而非 .innerHTML 设置结果： 元素的内容由 value 属性控制，innerHTML 对其无效；
- 健壮的数值解析：用 parseInt() 提取整数，但必须配合 isNaN() 检查；若解析失败（如空字符串、"abc"），默认赋 0，避免 NaN + 5 = NaN；
- HTML 中仅在输入源上绑定事件：num1 和 num2 输入框添加 oninput="myFunction()"，res 输入框无需绑定。
? 完整代码示例
<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="myFunction()"
value="<?php echo htmlspecialchars($num1 ?? ''); ?>"
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="myFunction()"
value="<?php echo htmlspecialchars($num2 ?? ''); ?>"
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 ?? ''); ?>"
placeholder="0" aria-describedby="emailHelp" readonly>
</div>
</div>
<script>
function myFunction() {
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");
const result = document.getElementById("res");
// 安全解析：空值或非法输入 → 默认为 0
const x = Number(input1.value) || 0;
const y = Number(input2.value) || 0;
const sum = x + y;
result.value = sum; // 注意：使用 .value 赋值
}
</script>? 优化说明：
- 使用 Number() 替代 parseInt() 更适合本场景（支持小数，且对空字符串返回 0）；
- || 0 是简洁的默认值处理方式，比显式 isNaN() 判断更简练；
- PHP 输出前建议调用 htmlspecialchars() 防止 XSS；
- res 输入框添加 readonly 属性可防止用户手动修改（如需允许编辑，请移除该属性并注意双向同步逻辑）。
⚠️ 注意事项
- 若需支持浮点运算，Number() 已天然兼容，无需额外修改；
- 移动端软键盘切换输入框时，oninput 仍能准确捕获；
- 初始加载时若 $num1/$num2 有值，myFunction() 不会自动执行——如需首次加载即计算，可在脚本末尾追加 myFunction();；
- 如需响应 Enter 键提交等扩展行为，应在独立逻辑中处理，避免与实时计算耦合。
通过以上实现，即可获得流畅、健壮、符合现代 Web 交互习惯的实时计算体验。
