34

Is it possible to set a v-on:keyup.enter on the whole page, not only for an input element in javascript framework Vue.js ?

5 Answers 5

26

Perhaps a better way to do this is with a Vue component. This would allow you to control when you listen to events by including or not including the component. Then you could attach event listeners to Nuxt using the no-ssr component.

Here is how you create the component:

<template>
  <div></div>
</template>
  
<script>
  export default {
    created() {
      const component = this;
      this.handler = function (e) {
        component.$emit('keyup', e);
      }
      window.addEventListener('keyup', this.handler);
    },
    beforeDestroy() {
      window.removeEventListener('keyup', this.handler);
    }
  }
</script>
  
<style lang="stylus" scoped>
  div {
    display: none;
  }
</style>

Then on the page you want to use that component you'd add this HTML:

<keyboard-events v-on:keyup="keyboardEvent"></keyboard-events>

And then you'll have to add your event handler method:

methods: {
  keyboardEvent (e) {
    if (e.which === 13) {
      // run your code
    }
  }
}
0
20

Short answer is yes, but how depends on your context. If you are using vue-router as I am on a current project, you would want to add to the outer-most element you want that applied to. In my case I'm using the actual app.vue entry point's initial div element.

There is one catch that I believe is a hard requirement, the element has to be within the potentially focusable elements. The way I'm dealing with that is setting a -1 tabindex and just declaring my super-hotkeys (mostly for debug purposes right now) on the parent element in my app.

<template>
  <div
    id="app-main"
    tabindex="-1"
    @keyup.enter="doSomething"
  >
    <everything-else></everything-else>
  </div>
</template>

EDIT:

As a side note, I also added a touch of additional configuration to my vue-router to make sure the right element is focused when I transition pages. This allows the pageup/pagedown scrolling to already be in the right section based on the content area being the only scrollable section. You'd also have to add the tabindex="-1" to the app-content element as well.

router.afterEach(function (transition) {
  document.getElementById('app-content').focus();
});

and the basis of my app-content component:

<template>
  <div id="app-content" tabindex="-1">
    <router-view
      id="app-view"
      transition="app-view__transition"
      transition-mode="out-in"
    ></router-view>
  </div>
</template>
1
7

I created a small npm module that takes care of global keypress events in Vue, hope it makes someone's life easier: https://github.com/lupas/vue-keypress

4

My simplest approach:

Add into your root Vue component (or any other component):

new Vue({
    //...
    created() {
        window.addEventListener('keypress', this.onKeyPress);
    },
    beforeDestroy() {
        window.removeEventListener('keypress', this.onKeyPress);
    },
    methods: {
        onKeyPress(e) {
            console.log('KEYPRESS EVENT', e)
            //... your code
        }
    }
    //...
})
1

In Vue 3 composition API, you can do it with a composable:

import { onMounted, onUnmounted } from "vue";

export function useKeyupEvent(handler) {
  onMounted(() => document.addEventListener("keyup", handler));
  onUnmounted(() => document.removeEventListener("keyup", handler));
}

and then in your component setup:

useKeyupEvent( event => console.log(event))

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.