JavaScript 計算器限制輸入數字長度的實作方法

前言

在開發簡單的 JavaScript 計算器時，常會遇到需要限制使用者輸入數字長度的需求。這不僅能防止顯示區域溢位，也能避免因數值過大導致的運算錯誤。本文將透過一個實際的程式碼範例，示範如何在計算器的按鍵事件中加入長度檢查邏輯。

核心邏輯解析

以下是一個簡潔的 addNum 函式，用於處理數字按鍵的點擊事件：

function addNum(n) {
    var nowNum = myform.num.value;
    if (nowNum == "0") {
        myform.num.value = n;
    } else if (myform.num.value.length < 5) {
        myform.num.value = myform.num.value + n;
    }
}

程式碼逐行說明

• 取得目前顯示值： var nowNum = myform.num.value; 先從表單輸入框取得目前螢幕上顯示的數字字串。
• 處理初始狀態： 當顯示值為 "0" 時，直接替換為按下的數字 n，避免出現 01、02 這類前導零。
• 長度限制判斷： else if (myform.num.value.length < 5) 檢查目前字串長度是否小於 5（可依需求調整），若符合則將新數字附加在尾端。
• 超過長度不處理： 若長度已達上限，程式碼不進入任何分支，直接忽略該次輸入，達到限制目的。

進階應用建議

實務上可將最大長度定義為常數，方便日後維護：

const MAX_DIGITS = 10;
function addNum(n) {
    var input = document.getElementById('display');
    if (input.value === '0') {
        input.value = n;
    } else if (input.value.length < MAX_DIGITS) {
        input.value += n;
    }
}

此外，若計算器支援小數點、負號或科學記號，記得在長度判斷時一併考量這些特殊字元的佔位。

總結

透過簡單的 length 判斷即可有效限制計算器輸入長度，程式碼易讀且效能佳。開發者可依專案需求調整最大位數，並搭配其他輸入驗證（如防止重複小數點），打造更完善的使用者體驗。