DEV Community

Cover image for Keyup and Keydown Event Handlers in Vue 3
Lane Wagner for Boot.dev

Posted on β€’ Originally published at blog.boot.dev

6 2

Keyup and Keydown Event Handlers in Vue 3

I recently spent far too long fighting with Vue's keyup and keydown functionality. I wanted to handle ctrl+period keyboard events and it took me forever to find the part of the documentation that addressed my use case. Hopefully this guide can save you some time!

Take note: This guide is for Vue 3! If you're on Vue 2, find a different guide.

@keyup and @keydown

Some default keypress scenarios are quite simple. For example, want to capture when someone presses the "enter" key? You can do:

<input @keyup.enter="onPressEnter" />

Enter fullscreen mode Exit fullscreen mode

Or maybe you want your event to fire when the key is pressed, rather than when it's released:

<input @keydown.enter="onPressEnter" />
Enter fullscreen mode Exit fullscreen mode

Keep in mind that the onPressEnter needs to be defined and exposed to your template! If you're on the options API, that means it should be defined as a method, and if you're using setup(), it means you should be returning it from the setup() function.

Which keys work?

According to the docs, aliases are provided for common keys:

  • .enter
  • .tab
  • .delete (captures both "Delete" and "Backspace" keys)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

But what if you want to capture a different key? Well the docs mostly gloss-over this use-case unfortunately (at least I couldn't find anywhere where it was addressed)

I did however find some useful information in the Vue2 -> Vue3 migration guide. Turns out that can use the kebab-case name for any key you want to use as a modifier. For example:

<input @keyup.a="onPressA" />
<input @keyup.page-down="onPressPageDown" />
Enter fullscreen mode Exit fullscreen mode

It even works for some punctuation characters like the comma:

<input @keyup.,="onPressComma" />
Enter fullscreen mode Exit fullscreen mode

Now we get to my problem:

What if I want to capture an event on the period key?

The following does not work:

<input @keyup..="onPressPeriod" />
Enter fullscreen mode Exit fullscreen mode

Instead, you need to write a handler that captures all the keydown/keyup events and watch manually for the right property:

<input @keyup="onPress" />
Enter fullscreen mode Exit fullscreen mode
const onPress = (e) => {
  if (e.key !== ".") {
    // guard against non-period presses
    return;
  }
  onPressPeriod()
};
Enter fullscreen mode Exit fullscreen mode

System Modifiers

The topic of "system modifiers" or "key combinations" is explained well in the docs, so I won't spend much time on it. The four options available to you are:

  • .ctrl
  • .alt
  • .shift
  • .meta (The "meta" key is "command" on Apple keyboards and the "windows" key on Windows keyboards)

If you want to fire an event on ctrl+enter you can just chain the modifier:

<input @keyup.ctrl.enter="onPressEnter" />
Enter fullscreen mode Exit fullscreen mode

Event modifiers

<input @keyup.ctrl.stop="onPressCtrl" />
Enter fullscreen mode Exit fullscreen mode

Syntactically, event modifiers are chained onto the @keyup keyword as well. Your options include:

  • .stop - Stop the event's propagation to other handlers
  • .prevent - Prevent default handling of the event (like a page reload for a form submission)
  • .self - Only fire events for this element, not children
  • .capture - Handle the event here before handling it at the child level
  • .once - Trigger this event once at most
  • .passive - Process the default behavior immediately, and also handle it here without blocking

.exact modifier

If you want to fire your handler when the exact keys you've specified are pressed, use the .exact modifier.

<!-- this will fire even if alt or another key is also pressed -->
<button @keyup.ctrl="onPressCtrl">A</button>
Enter fullscreen mode Exit fullscreen mode
<!-- this will fire if ONLY ctrl is pressed -->
<input @keyup.ctrl.exact="onPressCtrl" />
Enter fullscreen mode Exit fullscreen mode

Mouse button modifiers, don't let them fool you

At first I assumed that .left and .right referred to the arrow keys. In fact, they refer to the mouse buttons. All three of the following modifiers can be used to restrict the event to the three mouse buttons.

  • .left
  • .right
  • .middle

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay