实现输入框实时加法计算并自动填充结果

本文介绍如何通过原生 javascript 实现两个数字输入框的实时求和，并将结果自动同步至第三个输入框，全程无需点击按钮，支持空值、非法输入容错及页面加载时的初始值保留。

本文介绍如何通过原生 javascript 实现两个数字输入框的实时求和，并将结果自动同步至第三个输入框，全程无需点击按钮，支持空值、非法输入容错及页面加载时的初始值保留。

在表单开发中，常需实现「输入即响应」的交互逻辑，例如将两个数值输入框（num1 和 num2）的和实时显示在第三个只读/可编辑输入框（res）中。关键在于：监听输入变化、安全解析数值、及时更新目标字段，而非依赖按钮触发。

✅ 正确实现步骤

1. 绑定 oninput 事件：该事件在 值发生任何变化（包括粘贴、键盘输入、上下箭头调整）时立即触发，比 onchange 或 keyup 更可靠；
2. 使用 .value 而非 .innerHTML 设置结果： 元素的内容由 value 属性控制，innerHTML 对其无效；
3. 健壮的数值解析：用 parseInt() 提取整数，但必须配合 isNaN() 检查；若解析失败（如空字符串、”abc”），默认赋 0，避免 NaN + 5 = NaN；
4. 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 交互习惯的实时计算体验。