How do catch the Enter Event on a non-input element in vue?

user_7305720 0
Viewed 251

I have a confirm Button, that should also be triggered by an Enter-Event.

Basically, I was hoping that this could work:

<someComponent @keyup.enter="handleConfirm" />
...
methods: {
  handleConfirm(event) {
       console.log("works") 
  }
}

But it doesn't. Apparently, this approach only works with input fields.

How can I listen to a keyup Event in Vue on any element/component?

EDIT To clarify: Any element/component even out of focus.

vuejs2 vue-component vue.js
2 Answers

The click event already triggers with the ENTER key (it also triggers with Space in some browsers, like Chrome for desktop). So, your code only needs a @click="callEvent" and everything works well since the focus is already on the button

If you want that any ENTER triggers the button even if it isn't with focus, you should bind the event to the window object, which can be made inside the mounted handler

var app = new Vue({
  el: "#app",
  methods: {
    callEvent() {
      console.log("Event called");
    }
  },
  mounted() {
    window.addEventListener('keyup', function(event) {
      if (event.keyCode === 13) { 
        app.callEvent();
      }
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <button>Enter</button>
</div>

user_160957240

You can do this: <someComponent @keyup.enter="handleConfirm($event)" />

methods: {
  handleConfirm(event) {}
}
user_148071110
Related