Vue.js @keydown get key that was pressed

Question

I want to use Vue.js to output which key was pressed.

This code works:

window.addEventListener('keydown', (event) => { 
   console.log(event.key);
});

Something like that e.g.:

<div @keydown="getKey">
</div>

getKey: function(event) {
   console.log(event.key)
}

This does work, but in input boxes and textareas...it doesn't seem to work in divs though. Why can't you use the first example though? — marsnebulasoup
– marsnebulasoup, Commented Mar 15, 2021 at 20:04

Daniel · Accepted Answer · 2021-03-15 21:06:03Z

2

To achieve this you need to assign event listener to vue method:


created() {
  window.addEventListener('keydown', this.handleKeyDown);
},
beforeDestroy() {
  window.removeEventListener('keydown', this.handleKeyDown);
},
methods: {
  handleKeyDown(event) {
    console.log(event);
  }
}

answered Mar 15, 2021 at 21:06

Daniel

2,7772 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Titus Over a year ago

Thanks man. Had a lot of trubble with "$refs.something" undefined! Ur solution helped wonders! I just moved the addEventListener to the mounted() lifecycle.

Collectives™ on Stack Overflow

Vue.js @keydown get key that was pressed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related