JavaScript 實現輸入框實時計算：oninput 事件與頁面加載初始化技巧

JavaScript 實現輸入框實時計算：oninput 事件與頁面加載初始化技巧

需求：兩個輸入框預設值 123123，頁面加載即顯示商，輸入時實時更新，無需失去焦點。

關鍵差異：onchange vs oninput

完整實現代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實時除法計算器</title>
<script>
function compute() {
    var a = parseFloat(document.getElementById("txt1").value) || 0;
    var b = parseFloat(document.getElementById("txt2").value) || 0;
    if (b !== 0) {
        document.getElementById("txt3").value = (a / b).toFixed(2);
    } else {
        document.getElementById("txt3").value = "除數不能為0";
    }
}

// 頁面加載初始化
window.onload = function() {
    compute();
};
</script>
</head>
<body>
<input type="text" id="txt1" value="123123" oninput="compute()"> ÷
<input type="text" id="txt2" value="123123" oninput="compute()"> =
<input type="text" id="txt3" readonly>
</body>
</html>

進階優化

• 防抖：若計算極其複雜，可在 compute 內用 setTimeout / requestAnimationFrame 節流。
• 輸入驗證：input 事件配合 pattern 屬性或 JS 正則，限制只能輸入數字。
• 現代寫法：使用 addEventListener('input', compute) 替代內聯屬性，結構行為分離。

掌握 oninput 与 onload 配合，即可構建流暢的實時計算表單。