VUE how to evoke keydown method

user_1089532 0
Viewed 114

i would like to create method which will run when any keyboard key will down, and then i will check which key was down. What is important, it should run even if focus will be out of any inputs and so on.

I've created evoking when focus is in 'input' using:

 @keydown.native="keymonitor"

but i would like to evoke 'keymonitor' method when there is no focus on input, but coursor is anywhere on website and focus is anywhere.

How to do it? if a add

@keydown.native="keymonitor"

to general div or body, it doesn't work.

Thanks for help.

vue.js javascript
2 Answers

You can use the normal EventTarget#addEventListener on window as follows:

new Vue({
  el:"#app",
  created() {
    window.addEventListener('keydown', e => {
      console.log(e.keyCode);
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

user_74863130

You can use the keydown event.

Here is an example within a Vue component:

<template>
  <div>
    {{ lastKeyPressed }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      lastKeyPressed: null,
    }
  },
  created() {
    window.addEventListener("keydown", (e) => {
      this.lastKeyPressed = e.keyCode;
      console.log(e.keyCode);
    });
  }
};
</script>

Be sure to use an arrow function on the addEventListener callback to ensure that this keyword works correctly, see this for other examples.

user_46905250
Related