Don't spend $10k on a bootcamp. Try our back-end career path first.
Back home

Keyup and Keydown Event Handlers in Vue 3

By Lane Wagner on Sep 4, 2022

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" />

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

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

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:

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" />

It even works for some punctuation characters like the comma:

<input @keyup.,="onPressComma" />

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" />

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

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

Get a back-end job without spending $10k on a bootcamp

  • Learn Python, Javascript and Go
  • Build the professional projects you need to land your first job
  • Spend about 6 months (when done part-time)
  • Pricing as low as $24/month*
  • No risk. Cancel anytime.

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:

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

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

Event modifiers #

<input @keyup.ctrl.stop="onPressCtrl" />

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

A simple path to your career in back-end development

The pace of Boot.dev's JavaScript, Python and Go courses has been perfect for me. The diverse community in Discord is a blast, and other members are quick to help out with detailed answers and explanations.

- Daniel Gerep from Cassia, Brasil

.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>
<!-- this will fire if ONLY ctrl is pressed -->
<input @keyup.ctrl.exact="onPressCtrl" />

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.

Learn back-end without spending $10,000+ on a bootcamp

Related Reading