JavaScript 輸入框限制為 10 的倍數：blur 驗證優於 keyup 的最佳實踐

需求

輸入框失去焦點時，自動修正值為 10 的倍數（向下取整）：輸入 23 → 20，輸入 5 → 10 (最小值)，輸入非數字 → 10。

為何不建議 keyup

推薦：blur 事件 + 統一修正邏輯

$(function() {
    $("#demo").blur(function() {
        var $this = $(this);
        var val = $this.val().trim();
        
        // 空值預設 10
        if (!val) val = "10";
        
        // 解析整數，非數字預設 10
        var num = parseInt(val, 10);
        if (isNaN(num)) num = 10;
        
        // 向下取整到 10 的倍數，最小 10
        num = Math.max(10, num - (num % 10));
        
        // 寫回輸入框
        $this.val(num);
    });
});

原生 JS 版（無 jQuery 依賴）

document.getElementById('demo').addEventListener('blur', function() {
    var val = this.value.trim();
    if (!val) val = '10';
    var num = parseInt(val, 10);
    if (isNaN(num)) num = 10;
    num = Math.max(10, num - (num % 10));
    this.value = num;
});

進階：input 事件即時提示（不修改值）

$("#demo").on('input', function() {
    var val = $(this).val().trim();
    var num = parseInt(val, 10);
    if (!isNaN(num)) {
        var corrected = Math.max(10, num - (num % 10));
        if (corrected !== num) {
            $(this).next('.hint').text('將自動修正為 ' + corrected).show();
        } else {
            $(this).next('.hint').hide();
        }
    }
}).blur(function() {
    // blur 時真正修正
    var corrected = Math.max(10, parseInt($(this).val() || 10, 10) - (parseInt($(this).val() || 10, 10) % 10));
    $(this).val(corrected);
    $(this).next('.hint').hide();
});

HTML 結構建議

<input type="text" id="demo" placeholder="輸入金額(10的倍數)" />
<span class="hint" style="color:#999; font-size:12px; display:none;"></span>

總結

blur 修正值，input 提示預期值**。這樣用戶編輯時不受干擾，失焦時自動修正，體驗最佳。核心邏輯：Math.max(10, num - num % 10) 向下取整到 10 的倍數並保底 10。

1. 上一篇文章： JavaScript 登入按鈕事件：提示彈窗與頁面跳轉完整實現
2. 下一篇文章： IIS 發布網站報錯「未能寫入輸出文件，目錄名稱無效」完整排查指南

程式設計綜合問答

醫療場景：刷就診卡自動生成條碼標簽並打印的完整實現鏈路

業務流程 患者刷卡 → 讀卡器（鍵盤模式/串口）輸入卡

FCKeditor 在萬網主機上 DLL 版本衝突的排查

現象 部署到萬網虛擬主機後，FredCK.FCKeditor

HBase Phoenix 查詢報 CallerDisconnectedException 異常排查

現象描述 在 Phoenix + HBase 平台中，數據量

JavaScript 動態切換樣式表：解決 Chrome 下 disabled 屬性失效

問題代碼 aa[i].disabled = false; /