如何用JavaScript实时计算两个输入框数值之和并显示在禁用框中

你可以通过监听输入框的input事件实现实时计算，以下是完整的实现方案：

完整代码（含HTML与JavaScript） #

<div class="row">
    <div class="col-xl-4">
        <div class="form-group">
            <label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label>
            <input type="number" class="form-control" id="fee1" name="fee1" required min="0">
        </div>
    </div>
    <div class="col-xl-4">
        <div class="form-group">
            <label class="gr"><b>Other Charges:</b></label>
            <input type="number" class="form-control" id="fee2" name="fee2" min="0">
        </div>
    </div>
    <div class="col-xl-4">
        <div class="form-group">
            <label class="gr"><b>Total Fee:</b></label>
            <input type="number" disabled class="form-control" id="total_fee" name="total_fee">
        </div>
    </div>
</div>

<script>
// 获取三个输入框的DOM元素
const fee1 = document.getElementById('fee1');
const fee2 = document.getElementById('fee2');
const totalFee = document.getElementById('total_fee');

// 定义计算总和的函数
function calculateTotal() {
    // 转换输入值为数字，空值/非数字内容默认按0处理
    const value1 = Number(fee1.value) || 0;
    const value2 = Number(fee2.value) || 0;
    // 将计算结果赋值给total_fee输入框
    totalFee.value = value1 + value2;
}

// 给两个费用输入框绑定input事件，内容变化时实时计算
fee1.addEventListener('input', calculateTotal);
fee2.addEventListener('input', calculateTotal);

// 页面加载完成后初始化计算一次，避免total_fee初始为空
calculateTotal();
</script>

关键细节说明 #

• input事件的作用：该事件会在输入框内容发生任何变化时触发（包括键盘输入、粘贴、清空操作），确保总和实时更新。
• 空值/非数字处理：用Number()转换输入值，配合|| 0可以把空字符串、非数字内容转为0，避免计算出NaN（非数字）的错误结果。
• 初始化计算：页面加载后主动调用一次calculateTotal()，保证页面刚打开时total_fee就显示正确的初始值（两个输入框为空时显示0）。

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