輸入框數值限制：原生 HTML `max`/`min` 屬性 vs jQuery 動態校驗

需求：「限制 `` 最大值不超過 10，超過自動修正為 10」。很多開發者第一反應是寫 jQuery 監聽 `input` 事件，實則 **HTML5 原生屬性 `max`、`min`、`step` 配合 `type="number"` 即可零代碼實現核心邏輯**，瀏覽器原生支援邊界截斷、步長控制、驗證提示，效能與體驗雙贏。

方案一：原生 HTML5 (推薦首選)

<!-- 核心屬性：type="number" + max/min/step -->
<input type="number" 
       id="numInput" 
       name="quantity" 
       min="0" 
       max="10" 
       step="1" 
       value="0"
       required
       placeholder="請輸入 0-10">

<!-- 表單提交時瀏覽器自動攔截非法值，無需 JS -->
<button type="submit">提交</button>

優勢：零 JS 依賴、原生鍵盤優化 (移動端彈出數字鍵盤)、內建驗證 UI (`:invalid` 偽類可自訂樣式)、無障礙支援完善。
注意：`type="text"` **不支援** `max`/`min` 驗證，**必須用 `type="number"`**。若極度討厭原生上下調整箭頭，可用 CSS 隱藏：

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; } /* Firefox */

方案二：jQuery 動態校驗 (兼容舊瀏覽器/複雜邏輯)

若必須用 `type="text"` 或需自定義修正邏輯 (如超過上限不截斷改報警、非整數步長等)，jQuery 實現：

$('#numInput').on('input blur', function() {
    var val = parseFloat($(this).val());
    var max = 10, min = 0;
    
    if (isNaN(val)) {
        $(this).val(''); // 或恢復上次合法值
        return;
    }
    
    // 邊界修正
    if (val > max) val = max;
    if (val < min) val = min;
    
    // 可選：步長對齊 (如 step=0.5)
    // val = Math.round(val / 0.5) * 0.5;
    
    $(this).val(val); // 寫回修正值，觸發再次 input 事件需防抖
}).on('keydown', function(e) {
    // 可選：攔截非數字鍵 (含小數點、負號控制)
    // 較複雜，建議配合原生 type="number" 使用
});

關鍵點：

• 監聽 `input` (即時) + `blur` (失焦終審) 事件。
• `parseFloat`/`parseInt` 安全轉換，`isNaN` 過濾非數字。
• 修正後寫回 `val()` 會再次觸發 `input`，需加旗標防死循環，或改用 `blur` 只在失焦修正。
• 表單提交前**必須再次服務端驗證**，前端攔截只為體驗，非安全防線。

方案三：綜合最佳實踐 (原生為主，JS 為輔)

<input type="number" id="numInput" min="0" max="10" step="1" required>
<script>
// 僅做原生無法覆蓋的增強：如自定義錯誤提示、跨欄位聯動驗證
const input = document.getElementById('numInput');
input.addEventListener('invalid', function(e) {
    e.preventDefault(); // 阻止瀏覽器預設氣泡
    this.setCustomValidity('請輸入 0 到 10 之間的整數');
    this.reportValidity(); // 顯示自定義提示
});
input.addEventListener('input', function() {
    this.setCustomValidity(''); // 輸入合法時清除錯誤狀態
});
</script>

總結選型指南

**核心原則**：能用瀏覽器原生功能解決的，絕不寫庫代碼。`type="number"` 配合 `max`/`min` 是表單數值限制的「銀彈」，請優先拥抱標準。