HTML Input 輸入框限制輸入類型的多種 JavaScript 實現方案

HTML Input 輸入框限制輸入類型的多種 JavaScript 實現方案

在實際開發中，經常需要限制輸入框只能輸入特定字符（如只能輸入數字、字母、漢字、小數等）。雖然後端驗證必不可少，但前端即時攔截能顯著提升用戶體驗。本文整理了多種基於 JavaScript 事件（onkeyup、onkeydown、onbeforepaste 等）的實用方案。

常見限制場景與代碼片段

進階控制技巧

1. Enter 鍵跳轉到下一個輸入框

<input onkeydown="if(event.keyCode==13)event.keyCode=9">

2. 只讀屬性

<input readonly value="只能顯示，不能修改">

3. 取消按鈕聚焦虛線框

<input type="submit" value="提交" hidefocus="true">

4. 基於鍵盤碼的精確控制（無閃動）

<script>
function onlyNum() {
    // 數字鍵(48-57)、小鍵盤(96-105)、Backspace(8)
    if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)||(event.keyCode==8)))
        event.returnValue=false;
}
</script>
<input onkeydown="onlyNum();">

5. 允許小數點、負數的智能處理

<input name="input" type="text" onkeyup="JHshNumberText(this)" id="title">
<script>
function JHshNumberText(a) {
    var fa = "";
    if(a.value.substring(0,1)=="-") fa="-"; // 保留負號
    var str = (a.value.replace(/[^0-9.]/g,'')).replace(/[.][0-9]*[.]/, '.'); // 過濾非數字/點，合併多個點
    if (str.substring(0,1)==".") str="0"+str; // 開頭是點補 0
    a.value = fa + str;
}
</script>

6. 限制小數位數（如最多兩位）

<input onkeyup="this.value=this.value.replace(/^(-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

最佳實踐建議

1. 組合使用：onkeydown 攔截按鍵（無閃動）+ onkeyup 修正粘貼/拖拽內容 + onbeforepaste 處理粘貼板數據。
2. 正則優化：根據業務精確定義字符集，避免過於寬鬆或嚴格。
3. 用戶體驗：避免使用 alert 彈窗阻斷操作，建議靜默修正或提示條展示。
4. 後端必驗：前端攔截只能作為輔助，服務端必須進行嚴格校驗。