Vue 3 鍵盤事件修飾符：keyup.enter 與組合鍵
在開發 Web 應用程式時，鍵盤事件的處理，例如：使用者按下 Enter 送出表單、按下 Esc 關閉彈出視窗。是提升使用者體驗的關鍵。在原生 JavaScript 中，我們必須監聽 keydown 或 keyup，再透過 key 或 keyCode 來判斷按下的是哪一個鍵。
Vue 3 提供了直覺且強大的鍵盤事件修飾符，讓您可以直接在模板中指定要監聽的特定按鍵，甚至還能輕鬆實現 Ctrl + Enter 等複合式組合鍵功能。本文將帶您全面掌握 Vue 3 鍵盤事件修飾符的實戰技巧！
什麼是鍵盤事件修飾符？
當我們在 Vue 3 中 監聽鍵盤事件，例如：@keyup 或 @keydown 時，可以透過點號 . 後接特定的按鍵別名，來限制只有在特定按鍵被釋放或按下時，才觸發事件處理函式。
為什麼要使用鍵盤事件修飾符？
- 免去條件判斷：不用再寫
if (e.key === 'Enter')或舊式的if (e.keyCode === 13)。 - 程式碼更具語意化：直接在模板中綁定對應按鍵，可讀性極高。
- 跨瀏覽器相容：Vue 在底層自動處理了不同瀏覽器之間對鍵盤代碼的相容性問題。
常用鍵盤事件修飾符別名
Vue 3 為最常用的鍵盤按鍵提供了內建的別名，以下是開發時最常使用的鍵盤事件修飾符清單：
| 修飾符 | 功能說明 |
|---|---|
enter | 確認鍵 |
tab | 定位鍵 |
delete | 刪除、退位鍵 |
esc | 退出鍵 |
space | 空白鍵 |
up、down、left、right | 上、下、左、右鍵 |
ctrl | 控制鍵 |
alt | 切換鍵 |
shift | 換檔鍵 |
meta | 視窗、命令鍵 |
page-up | 上頁鍵 |
page-down | 下頁鍵 |
caps-lock | 大寫鎖定鍵 |
沒有列在表格中的按鍵
把原生 KeyboardEvent.key 的值轉成 kebab-case 就能直接當修飾符使用，例如：PageDown 寫成 @keyup.page-down。
基本用法：按 Enter 送出
最常見的情境，就是讓使用者在 表單欄位 按下 Enter 直接送出，不必再多點一次按鈕。
<input v-model="keyword" @keyup.enter="search" type="text" placeholder="輸入關鍵字">
<div v-if="isModalOpen" @keyup.esc="closeModal" tabindex="0">彈出視窗</div>比起原生寫法，模板已經表達了「按哪個鍵、做什麼事」：
// 原生 JavaScript 還要自己判斷按鍵
input.addEventListener('keyup', (e) => {
if (e.key === 'Enter') search();
});組合鍵：串接系統修飾鍵
ctrl、alt、shift、meta 屬於 系統修飾鍵，把它們與按鍵串接起來就是組合鍵：
<!-- 按住 Ctrl 再按 Enter 才送出，適合聊天室、留言框 -->
<textarea @keyup.ctrl.enter="sendMessage"></textarea>
<!-- Shift + Delete -->
<button @keyup.shift.delete="forceRemove" type="button">強制刪除</button>keyup 搭配系統修飾鍵的陷阱
@keyup.ctrl 是「放開某個鍵時 Ctrl 仍被按著」才會觸發。若您先放開 Ctrl 再放開另一個鍵，事件就不會發生。需要更嚴謹的行為時建議改用 @keydown。
精準控制：.exact 修飾符
預設情況下，只要包含指定的按鍵就會觸發，即使同時按著其他修飾鍵也算數。.exact 可以要求 完全只按下指定的組合：
<!-- 即使同時按著 Shift、Alt 也會觸發 -->
<button @click.ctrl="onCtrlClick" type="button">一般</button>
<!-- 只有單獨按著 Ctrl 才觸發 -->
<button @click.ctrl.exact="onCtrlClick" type="button">精準</button>
<!-- 沒有按任何系統修飾鍵時才觸發 -->
<button @click.exact="onPlainClick" type="button">純點擊</button>總結
Vue 3 的鍵盤事件修飾符將繁瑣的鍵盤事件邏輯判斷，濃縮成模板上的幾個字元。在設計複雜表單、對話框、或是豐富的互動式介面時，善用 .enter、.esc，不僅能大幅減少程式中的雜音，還能快速為您的網站注入流暢、優質的使用者體驗！
常見問題
如何做到按 Enter 送出表單？
在輸入框上寫 @keyup.enter="submit" 即可，不需要自己判斷 e.key。若表單本身有 <form> 標籤，也可以改用 @submit.prevent。
怎麼監聽 Ctrl + Enter 這類組合鍵？
把系統修飾鍵與按鍵串接起來即可，寫成 @keyup.ctrl.enter="send"，代表按住 Ctrl 的同時按下 Enter 才觸發。
.exact 修飾符的用途是什麼？
預設只要包含指定的修飾鍵就會觸發，即使同時按著其他鍵也算。加上 .exact 後，必須完全只按下指定的組合才會觸發，可避免與其他快捷鍵衝突。
沒有別名的按鍵要怎麼監聽？
直接把原生 KeyboardEvent.key 的值轉成 kebab-case 當修飾符使用，例如：PageDown 寫成 @keyup.page-down。
keyup 與 keydown 差在哪裡？
keydown 在按下的瞬間觸發，長按會連續觸發，適合方向鍵移動這類連續操作；keyup 在放開按鍵時才觸發，適合送出、關閉這類只該執行一次的動作。
為什麼在非表單元素上按鍵沒有反應？
鍵盤事件只會發送給具有焦點的元素。一般 <div> 需要加上 tabindex 才能取得焦點，或者把監聽掛在 window 上。
