JavaScript 實現輸入框只能輸入 1-15 數字、超出自動修正、禁止粘貼

需求分析

• 只能輸入數字（過濾非數字）。
• 值範圍 1-15：小於 1 強制設為 1，大於 15 強制設為 15。
• 禁止粘貼操作。
• 最大長度 2 位（15 為兩位）。

完整實現代碼（原生 JS + jQuery 兩版本）

版本一：原生 JS（無依賴，推薦）

<input type="text" id="maxnum" name="maxnum" maxlength="2" 
       oninput="handleInput(this)" onpaste="return false" />

<script>
function handleInput(el) {
    // 1. 過濾非數字
    let val = el.value.replace(/\D/g, '');
    // 2. 空值不處理
    if (val === '') { el.value = ''; return; }
    // 3. 轉數字並限制範圍
    let num = parseInt(val, 10);
    if (num < 1) num = 1;
    if (num > 15) num = 15;
    // 4. 回填
    el.value = num;
}
</script>

版本二：jQuery（如項目已引用）

<input type="text" id="maxnum" name="maxnum" maxlength="2" />

<script>
$('#maxnum').on('input', function() {
    let val = this.value.replace(/\D/g, '');
    if (val === '') return;
    let num = parseInt(val, 10);
    if (num < 1) num = 1;
    if (num > 15) num = 15;
    this.value = num;
}).on('paste', function(e) {
    e.preventDefault(); // 禁止粘貼
});
</script>

關鍵點解析

進階：封裝為可復用指令

// Vue 2 指令範例
Vue.directive('range', {
  inserted(el, binding) {
    const [min, max] = binding.value;
    el.addEventListener('input', () => {
      let val = el.value.replace(/\D/g, '');
      if (val === '') return;
      let num = parseInt(val, 10);
      el.value = Math.max(min, Math.min(max, num));
    });
    el.addEventListener('paste', e => e.preventDefault());
  }
});
// 使用: <input v-range="[1, 15]" maxlength="2" />

總結

使用 oninput 統一處理值過濾與範圍修正，onpaste 禁止粘貼，maxlength 限制長度。原生 JS 版本零依賴、兼容性最好，推薦直接集成。