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	大寫鎖定鍵

總結

Vue 3 的鍵盤事件修飾符將繁瑣的鍵盤事件邏輯判斷，濃縮成模板上的幾個字元。在設計複雜表單、對話框、或是豐富的互動式介面時，善用 .enter、.esc，不僅能大幅減少程式中的雜音，還能快速為您的網站注入流暢、優質的使用者體驗！