Suggest an editImprove this articleRefine the answer for “What are key modifiers?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Key modifiers** are special modifiers for the `v-on` directive that let a handler run **only when a specific key or key combination is pressed**. They are used with the `keyup` and `keydown` events. **Key point:** key modifiers let you react only to the keys you need (for example Enter, Escape, arrows, Tab) without manually checking `event.key` in code.Shown above the full answer for quick recall.Answer (EN)Image**Key modifiers** are special modifiers for the `v-on` directive that let a handler run **only when a specific key or key combination is pressed**. They are used with the `keyup` and `keydown` events. In simple terms: > **Key modifiers let you react only to the keys you need (for example Enter, Escape, arrows, Tab), without manually checking** `event.key` **in code.** --- ## The simplest example ```html <input @keyup.enter="sendMessage"> ``` The handler fires **only** if the user presses Enter. Without modifiers, you would have to write: ```js onKeyPress(e) { if (e.key === 'Enter') { this.sendMessage() } } ``` --- ## Main key modifiers ### Frequently used: ```html @keyup.enter @keyup.esc @keyup.tab @keyup.space ``` ### Arrows: ```html @keyup.up @keyup.down @keyup.left @keyup.right ``` ### Deletion: ```html @keyup.delete <!-- works as both Backspace and Delete --> ``` --- ## Combinations with system modifiers ```html @keyup.ctrl.enter="submit" @keyup.shift.tab="backward" @keyup.alt.s="save" ``` This works because Vue checks: - `event.ctrlKey` - `event.shiftKey` - `event.altKey` - `event.metaKey` (Cmd on Mac) --- ## A useful case: submitting a form on Enter ```html <input @keyup.enter="submitForm"> ``` --- ## Dynamic key modifier You can use a computed event name: ```html <input v-on:[eventName]="doSomething"> ``` But key modifiers only work with a direct key name, for example: ```html @keyup[eventName] Not allowed ``` --- ## Important (Vue 2 vs Vue 3) - In Vue 2, there were `keyCodes` (for example, `keyCode: 13`) - In Vue 3, they were **removed**, and modifiers work only through key names (`enter`, `esc`)For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.