Keyup and Keydown Occasion Handlers in Vue 3

I lately spent far too lengthy combating with Vue’s keyup and keydown performance. I wished to deal with ctrl+interval keyboard occasions and it took me perpetually to search out the a part of the documentation that addressed my use case. Hopefully this information can prevent a while!

Take be aware: This information is for Vue 3! When you’re on Vue 2, discover a completely different information.

@keyup and @keydown

Some default keypress eventualities are fairly easy. For instance, need to seize when somebody presses the “enter” key? You are able to do:

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

Or possibly you need your occasion to fireplace when the secret is pressed, somewhat than when it is launched:

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

Remember the fact that the onPressEnter must be outlined and uncovered to your template! When you’re on the choices API, meaning it must be outlined as a technique, and should you’re utilizing setup(), it means you need to be returning it from the setup() perform.

Which keys work?

In accordance to the docs, aliases are offered for widespread keys:

• .enter
• .tab
• .delete (captures each “Delete” and “Backspace” keys)
• .esc
• .area
• .up
• .down
• .left
• .proper

However what if you wish to seize a completely different key? Effectively the docs largely gloss-over this use-case sadly (at the least I could not discover wherever the place it was addressed)

I did nevertheless discover some helpful info within the Vue2 -> Vue3 migration information. Seems that may use the kebab-case title for any key you need to use as a modifier. For instance:

<enter @keyup.a="onPressA" />
<enter @keyup.page-down="onPressPageDown" />

It even works for some punctuation characters just like the comma:

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

Now we get to my downside:

What if I need to seize an occasion on the interval key?

The next does not work:

<enter @keyup..="onPressPeriod" />

As an alternative, you’ll want to write a handler that captures all the keydown/keyup occasions and watch manually for the fitting property:

<enter @keyup="onPress" />

const onPress = (e) => {
  if (e.key !== ".") {
    // guard in opposition to non-period presses
    return;
  }
  onPressPeriod()
};

System Modifiers

The subject of “system modifiers” or “key mixtures” is defined nicely within the docs, so I will not spend a lot time on it. The 4 choices accessible to you’re:

• .ctrl
• .alt
• .shift
• .meta (The “meta” secret is “command” on Apple keyboards and the “home windows” key on Home windows keyboards)

If you wish to fireplace an occasion on ctrl+enter you possibly can simply chain the modifier:

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

Occasion modifiers

<enter @keyup.ctrl.cease="onPressCtrl" />

Syntactically, occasion modifiers are chained onto the @keyup key phrase as nicely. Your choices embrace:

• .cease – Cease the occasion’s propagation to different handlers
• .stop – Stop default dealing with of the occasion (like a web page reload for a type submission)
• .self – Solely fireplace occasions for this ingredient, not kids
• .seize – Deal with the occasion right here earlier than dealing with it on the little one stage
• .as soon as – Set off this occasion as soon as at most
• .passive – Course of the default conduct instantly, and in addition deal with it right here with out blocking

.precise modifier

If you wish to fireplace your handler when the precise keys you have specified are pressed, use the .precise modifier.

<!-- this may fireplace even when alt or one other key can be pressed -->
<button @keyup.ctrl="onPressCtrl">A</button>

<!-- this may fireplace if ONLY ctrl is pressed -->
<enter @keyup.ctrl.precise="onPressCtrl" />

Mouse button modifiers, do not allow them to idiot you

At first I assumed that .left and .proper referred to the arrow keys. In truth, they confer with the mouse buttons. All three of the next modifiers can be utilized to limit the occasion to the three mouse buttons.