JavaScript 簡易計算器：限制輸入位數的實現技巧

需求

計算器數字輸入框最多允許 5 位數字，超過則忽略後續輸入。

核心邏輯

在數字按鈕的點擊處理函數中，檢查當前顯示值的長度，若小於限制則追加，否則不處理。

代碼範例

<input type="text" id="display" value="0" readonly>
<button onclick="addNum('1')">1</button>
<button onclick="addNum('2')">2</button>
<!-- 其他數字按鈕 -->

<script>
function addNum(n) {
    const display = document.getElementById('display');
    // 若當前為初始 "0"，直接替換
    if (display.value === '0') {
        display.value = n;
    }
    // 長度檢查
    else if (display.value.length < 5) {
        display.value += n;
    }
    // 超過 5 位：靜默忽略或可提示用戶
}
</script>

擴展：支援小數點、刪除、清空

• 小數點：檢查 !display.value.includes('.') 後再追加，且不計入長度限制或單獨限制小數位數。
• 刪除鍵：display.value = display.value.slice(0, -1) || '0';
• 清空鍵：display.value = '0';

最佳實踐建議

1. 將限制邏輯封裝為獨立函數/類，便於複用與測試。
2. 使用 input 事件監聽直接輸入（如鍵盤粘貼），統一攔截非法字符。
3. 考慮使用 <input type="number" max="99999"> 讓瀏覽器原生校驗（但樣式定制受限）。