Key Modifiers

Not only can you listen for an event, but you can also listen for specific keys that have been pressed. Again, you can do this is Vanilla JavaScript, but Vue.js makes this a whole lot easier. These key modifiers allow you to specify which key event you want a function to run. For example, if you want to run a function when the enter key is pressed and released, just use @keyup.enter.

<button @keyup.enter="someFunction">Button Text</button>

Other pre-defined key modifiers include:

• tab
• delete (both delete and backspace)
• esc
• space
• up
• down
• left
• right

If you wish to run a function when a specific key is pressed, you will need to obtain the key code of that specific key. There are a lot of resources out there for you to get the key code. If you don’t want to look through a long list of codes, you can visit Keycode.Info and get the key code by pressing the key you want to listen to.

For example, if you want to listen to the shift key, you can add a keyup modifier to listen to the keycode, 16.

<button @keyup.16="someFunction">Button Text</button>

One last thing about keyup events. You can even register or map a specific key to an event. You can do so easily with:

Vue.directive('on').keyCodes.f1 = 112;

This custom event will register the F1 key to @keyup.f1. The f1 of the registration is a friendly name and can be anything that is meaningful to you.