ASCII 碼快速查閱 (常用鍵)
| 字元 |
KeyCode |
備註 |
| 0-9 | 48-57 | 主鍵盤數字 |
| A-Z | 65-90 | 字母 (不分大小寫，keyCode 相同) |
| Backspace | 8 | 必須允許，否則無法刪除 |
| Tab | 9 | 表單導航需允許 |
| Enter | 13 | 視需求允許 |
| Delete | 46 | 刪除鍵 |
| 左右鍵 | 37, 39 | 游標移動 |
| Home/End | 36, 35 | 游標跳轉 |
| 小鍵盤 0-9 | 96-105 | NumLock 開啟時 |
| 小鍵盤 . | 110 | 小數點 |
三大過濾函式
<script type="text/javascript">
// 僅允許數字 (含小鍵盤) + 控制鍵
function onlyNumber(keyCode) {
return (keyCode >= 48 && keyCode <= 57) || // 主鍵盤 0-9
(keyCode >= 96 && keyCode <= 105) || // 小鍵盤 0-9
keyCode === 8 || keyCode === 9 || // Backspace, Tab
keyCode === 37 || keyCode === 39 || // 左右鍵
keyCode === 46 || keyCode === 35 || keyCode === 36; // Del, End, Home
}
// 僅允許字母 (A-Z, a-z) + 控制鍵
function onlyAlpha(keyCode) {
return (keyCode >= 65 && keyCode <= 90) || // A-Z
keyCode === 8 || keyCode === 9 || // Backspace, Tab
keyCode === 37 || keyCode === 39;
}
// 允許英數混合 + 控制鍵
function onlyAlphaNumeric(keyCode) {
return (keyCode >= 48 && keyCode <= 57) || // 數字
(keyCode >= 65 && keyCode <= 90) || // 字母
(keyCode >= 96 && keyCode <= 105) || // 小鍵盤數字
keyCode === 8 || keyCode === 9 || // Backspace, Tab
keyCode === 37 || keyCode === 39 || // 方向鍵
keyCode === 46 || keyCode === 35 || keyCode === 36;
}
</script>
ASP.NET 控制項套用
<!-- 僅數字 -->
<asp:TextBox ID="txtQty" runat="server" onkeydown="return onlyNumber(event.keyCode);" onpaste="return false;" />
<!-- 僅字母 -->
<asp:TextBox ID="txtCode" runat="server" onkeydown="return onlyAlpha(event.keyCode);" onpaste="return false;" />
<!-- 英數混合 -->
<asp:TextBox ID="txtSerial" runat="server" onkeydown="return onlyAlphaNumeric(event.keyCode);" onpaste="return false;" />
現代化寫法：input 事件 + 正則淨化 (推薦)
<input type="text" id="modernInput" />
<script>
const input = document.getElementById('modernInput');
// 僅數字：輸入時即時移除非數字
input.addEventListener('input', function (e) {
this.value = this.value.replace(/[^\d]/g, '');
});
// 僅英數：移除非英數
input.addEventListener('input', function (e) {
this.value = this.value.replace(/[^a-zA-Z0-9]/g, '');
});
// 允許小數：保留一個小數點
input.addEventListener('input', function (e) {
this.value = this.value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.');
});
</script>
比較：keydown 過濾 vs input 淨化
| 維度 |
keydown (keyCode) |
input + Regex |
| 攔截時機 |
按鍵按下、字元產生前 |
值已更新、DOM 同步後 |
| 中文輸入法 (IME) |
keyCode 通常為 229，難以精確控制 |
組合完成後觸發 input，可正確淨化 |
| 貼上 (Paste) |
需額外 onpaste="return false" 阻擋 |
貼上後自動觸發 input，自動淨化 |
| 拖放 (Drag & Drop) |
無法攔截 |
自動觸發 input，自動淨化 |
| 使用者體驗 |
按鍵無反應、無視覺回饋 |
字元短暫顯示後消失，較直覺 |
| 無障礙 |
螢幕閱讀器可能異常 |
標準輸入行為，相容性佳 |
最佳實務建議
- 新專案優先使用 input + Regex：涵蓋所有輸入管道 (鍵盤、貼上、拖放、IME)、維護成本低。
- 舊專案相容：保留 keydown 過濾，並加上
onpaste="return false;"。
- 伺服器端必須再驗證：前端過濾僅為 UX，資料完整性靠後端
Regex.IsMatch / int.TryParse 等。
- 小數/負數/千分位：使用
type="number" 配合 step="0.01" 或專用元件 (如 Cleave.js、Inputmask)。
- 行動裝置：虛擬鍵盤不觸發 keydown keyCode，input 事件通用。
