Keyboard Events

Keyboard Events

Vue provides key modifiers that let you listen for specific keys on keyboard events. Instead of checking which key was pressed inside your method, you can filter directly in the template.

Keyboard Event Listeners

<input @keyup="logKey">
<input @keydown="logKey">
<input @keypress="logKey">

Key Modifiers

<!-- Only fires when Enter is pressed -->
<input @keyup.enter="submit">

<!-- Only fires when Escape is pressed -->
<input @keyup.esc="clear">

<!-- Only fires when Tab is pressed -->
<input @keydown.tab="nextField">

Available Key Modifiers

Modifier	Key
.enter	Enter / Return
.tab	Tab
.delete	Delete and Backspace
.esc	Escape
.space	Space
.up	Arrow Up
.down	Arrow Down
.left	Arrow Left
.right	Arrow Right

Chaining Key Modifiers with Alt/Ctrl/Shift

<!-- Alt + Enter -->
<input @keyup.alt.enter="submit">

<!-- Ctrl + Click -->
<button @click.ctrl="selectAll">Ctrl+Click</button>

Key Takeaways

• Key modifiers filter keyboard events by specific key: @keyup.enter
• Common modifiers: .enter, .esc, .tab, .space, .up, .down
• System modifiers .ctrl, .alt, .shift can be combined with keys or click events