dafrok/v-hotkey

Vue 2.x directive for binding hotkeys to components.

v-hotkey

Vue 2.x directive for binding hotkeys to components.

Play with me

https://dafrok.github.io/v-hotkey

Install

$ npm i v-hotkey
# or
$ yarn add v-hotkey

Usage

import Vue from 'vue'
import VueHotkey from 'v-hotkey'

Vue.use(VueHotkey)

<template>
  <span v-hotkey="keymap" v-show="show"> 
    Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
  </span>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  },
  methods: {
    toggle () {
      this.show = !this.show
    },
    show () {
      this.show = true
    },
    hide () {
      this.show = false
    }
  },
  computed: {
    keymap () {
      return {
        // 'esc+ctrl' is OK.
        'ctrl+esc': this.toggle,
        'enter': {
          keydown: this.hide,
          keyup: this.show
        }
      }
    }
  }
}
</script>

Event Handler

• keydown (as default)
• keyup

Key Combination

Use one or more of following keys to fire your hotkeys.

• ctrl
• alt
• shift
• command (MacOS)
• windows (Windows)

Modifiers

prevent

Add the prevent modifier to the directive to prevent default browser behavior.

<template>
  <span v-hotkey.prevent="keymap" v-show="show">
    Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
  </span>
</template>

stop

Add the stop modifier to the directive to stop event propagation.

<template>
  <div v-hotkey.stop="keymap">
    <span> Enter characters in editable areas doesn't trigger any hotkeys. </span>
    <input>
  </div>
</template>

Key Code Alias

The default key code map is based on US standard keyboard. This ability to provide their own key code alias for developers who using keyboards with different layouts. The alias name must be a single character.

Definition

import Vue from 'vue'
import VueHotkey from 'v-hotkey'

Vue.use(VueHotkey, {
  '①': 49 // the key code of character '1'
})

Template

<span v-hotkey="keymap"></span>
<script>
export default {
  foo () {
    console.log('Hooray!')
  },
  computed: {
    keymap () {
      return {
        '①': foo
      }
    }
  }
}
</script>

v-hotkey's Issues

how to work with regex?

thanks for the project.

my issue is I need to give key control by numbers，like 0-9，so how can I finish this by regex?

Is it possible to load keymap dynamically?

I'm curious if there's a way to load the keymap dynamically from an object? If so what would work for that?

Here is what I've tried, it creates the object but it doesn't trigger the function:

keymap () {
  var jsonObj = {};
  for(var i=0; i<this.shipping_presets.length; i++){
    jsonObj[this.shipping_presets[i].hotkey.title] = this.selectPreset;
  }
   return jsonObj;
},

Thank you for your help!

Shortcut keys cannot be triggered when the cursor is in the textarea.

Conflicting keyboard shortcuts with text input

I have trouble writing into text field when hotkeys are enabled!

I am trying to achieve something like a Gmail style of keyboard shortcuts. So this is my current mapping:

1. To move the pointer up of down a list of items - j for next item and k for the previous item
2. For other items I have shortcuts like s for suspending, a for activate, x for delete, etc.
3. To focus on the search box - /
4. To unfocus (blur) from search box - esc

The component with search box and its hotkey definitions are used withing another component which has a list of items and hotkeys actions on that list.

Now when I press /, as expected focus goes to the search box. But then when I try to type something in the search box that has the letter s, then it enters s in search but along with that s for suspend is also executed.

How can I make sure hotkeys s, a, and x doesn't run when the search box is in focus?

"NumPad +" won't assign

Can't assign Numpad + as hotkey, but Numpad - works like a charm.

      keymap () {
        return {
          'numpad -': this.volumeDown,
          'numpad +': this.volumeUp
        }
      }

Where to dig in? Thanks!

Demo page doesn't work

https://dafrok.github.io/v-hotkey/ gives a 404 Not Found.

Share demo source

The demo is really nice but I can't find the un-minified source anywhere. Specifically I'd like to see how this page was implemented:
https://dafrok.github.io/v-hotkey/#/step/5

Could you open-source the demo as well?

Is it possible to bind ctrl/shift/alt/meta only?

Is it possible to bind only the modifier key events? Use case would be e.g. to display keyboard hints when say "Alt" is pressed.

FORBIDDEN_NODES should be optional

from src/helper.js

const FORBIDDEN_NODES = ['INPUT', 'TEXTAREA', 'SELECT']
if (FORBIDDEN_NODES.includes(nodeName)) return

I want to enable v-hotkey shortcut in editable elements(like input, select, textarea).

Can this be a option instead of hard-coded?

Using KeyboardEvent.keyCode is depricated

The code is currently using the keyboard event's key code, which has been deprecated. You can read more about it here.

How to handle 'ctrl + left'?

Hello
thanks for v-hotkey!
How to handle combination 'ctrl+left'? In chrome fire only 'left' without 'ctrl'

Change the key map given a condition

Im wondering if it is possible to make the key map a function of another variable. At the moment Im trying as a computed variable:

  computed: {
    keymap() {
      const keymap = {
        right: this.increaseIndex,
        left: this.decreaseIndex,
      }
      if (this.showDialog) {
        keymap.esc = this.hideDialog
      }
      return keymap
    }
  }

However, altho the variable returned by keymap() changes, the behavior of the hot keys doesnt (the esc key is not activated). Any ideas?

How to override hotkeys in child component?

How can i reassign or override keymap of parent component in the child component? Is it possible?

I have a large application and in some places i need to bind same hotkey for different actions.
Then i'm in parent window i need to bind 'enter' for one method and in child dialog i need another action.
Thanks!

NPM Package is outdated

Dealing with a problem using v-hotkeys I've noticed that the code of the v0.8.0 is different from the code on the master branch of the project. The outdate is since the latest commits from Sept 3th, 2020, for example, this commit is not included on the v0.8.0

Could be possible to create a v0.8.1 (or v0.9.0) with the latest improvements? Maybe there is a reason for not update the npm package but I think that users could keep using v0.8.0 if they prefer.

Thanks for your time.

how can i disable ctrl+r for web Browser

Hi，
how can i disable ctrl+r for web Browser，when i must use ctrl + r to show rulers, but it will refresh browser...
i try it no work

  event.stopPropagation()
  event.preventDefault()
  event.keyCode = false
  event.returnValue = false
  window.event.keyCode = false

do you know how to disable ? thanks~

This part of code “e.preventDefault()” should be called at last.

In the code src/main.js sixth line, if I use the .prevent, here first called e.preventDefault (), which is very problematic. It will prevent many browsers from default. For example, in the same page, I still have a input, I use backspace keys, ctrl +v or ctrl+x and other key combinations can not respond, it should be called after callback execution.

Vue 3 Support

here's a way to use in Vue 3 in the mean time if anyone needs this:

app.directive('hotkey', {
  beforeMount: VueHotkey.directive.bind,
  updated: VueHotkey.directive.componentUpdated,
  unmounted: VueHotkey.directive.unbind,
});

Hotkey prevent does not allow write on input

If I use hotkey.prevent on a div, and inside this div I put a input, the hotkey doesn't allow to write on this input. If I remove the prevent directive, works correctly.

How to prevent key from being intercepted by v-hotkey when focus is in an editable field?

trigger when specific element has focused

suppose i have two drop down...
i want if focus was on dropdown 1 , function1 run with Enter
if focus was on dropdown2, function2 run with Enter

Is typescript and ssr supported?

[Vue warn]: Error in directive hotkey componentUpdated hook: "TypeError: Cannot read property 'value' of undefined"

Sometimes it would be neat to declare the hotkey binding inline (in the tag) - especially when you only have one binding. But in this case the error message [Vue warn]: Error in directive hotkey componentUpdated hook: "TypeError: Cannot read property 'value' of undefined" is thrown.

<my-tag v-hotkey="{ esc: cancelEdit }">
...
</my-tag>

When I use a computed (or data) variable instead of { esc: cancelEdit } everything works fine.

Possible to make event.preventDefault() into an option?

Right now a lot of shortcuts like Ctrl+S, Ctrl+R, etc trigger the default browser behavior. When mapped to custom hotkeys the programmer generally would want to skip this for which we can call event.preventDefault();

But I was thinking that we can add a modifier like this to make this the default behavior and save some extra code like this:

<template>
  <span v-hotkey.prevent="keymap" v-show="show">Not the .prevent</span>
</template>

What do you guys think?

"?" can't be assigned?

I have the following keymap:

    keymap() {
      return {
        '?': this.showHotKeyHelp,
        '/': this.goToSearch
      }
    }

The / is working fine. However ? does not do anything.

will update to vue 3.x ?

i just wanna ask the author will you update to the new version of vue? thank you....

Is there a way to only import the directive?

@Dafrok Is there a way to only import the directive?

I am thinking about something like this:

import vClickOutside from 'v-click-outside'

<script>
  export default {
    directives: {
      clickOutside: vClickOutside.directive
    },
    methods: {
      onClickOutside (event) {
        console.log('Clicked outside. Event: ', event)
      }
    }
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
</template>

I can submit a PR if this is not the case.

How to disable the keymap on an event?

I have a Vuetify <v-text-field></v-text-field> and I want to disable the keymap for the time the text field has the focus. I tried to change the to change the computed keymap based on text fields state like this:

get keymap() {
    if (textFieldActive) {
      return;
    }

    return {
      // ... my default keymap
    };
  }

The correct return statement is called, but the keybindings are still active. If I try to override the keybindigs, both the old an new one get executed. What do I miss?

mac vs windows keys

We have some differences between mac and windows
For example, on mac we usually type cmd, but control on windows.
How is this lib handling these differences?

I don't have a windows pc, then i cannot test it.
But i want to create a shortcut like:

mac: cmd+shif+a
win: ctrl+shif+a

Is this handled automatically or do i need to handle it by myself?

Failed to Resolve Directive

This module used to work but somehow stopped working. Running Vue 2.6.12. I have tried importing it in the child component & importing it like so:
import VueHotkey from 'v-hotkey/dist/v-hotkey.umd' but it still did not work.

Here is a simple setup of my project which includes another Vue module:
Child.vue

<template>
    <div v-hotkey="keymap" v-touch:swipe="swipe">
     // some divs
    </div> 
</template>
<script>
export default {
  computed: {
    keymap () {
      return {
        up: this.goPrev,
        down: this.goNext,
// ...
};
</script>

main.js

import Vue2TouchEvents from 'vue2-touch-events';
import VueHotkey from 'v-hotkey';

Vue.use(Vue2TouchEvents)
   .use(VueHotkey);

Did I do something wrong? Or is there a bug like these other modules' (1) (2) (3) git issue?

'prevent' blocks all default browser hotkeys

As it currently stands, attaching .prevent to v-hotkey blocks all default browser hotkeys, not just the ones specified in the keymap.

I don't think this is desired behavior in the vast majority of use cases. The standard use case would be to "overwrite" browser hotkeys with your own hotkeys while leaving the other mappings alone. For example, in my case, I need to overwrite the "save" hotkey, thus overwriting CTRL+S and META+S. However, using .prevent also blocks CMD+H (hide window on Mac) and CMD+R (reload the page), for example.

I've checked out the code and I think this can be easily achieved by only calling e.preventDefault when, inside the for loop of bindEvent, the code has found a hotkey match for the callback. This would only prevent the default behavior if the key has been recognised by v-hotkey.

Use of keycode depreciated per Vue docs

Behind the scenes, this plugin uses keycodes.

While reading the vue docs, I discovered that key codes are actually being depreciated from browsers. See: https://vuejs.org/v2/guide/events.html#Key-Codes

Should this plugin be updated for the new implementation, which appears to use built in labels for each key type? E.g., left and right arrow are ArrowLeft and ArrowRight respectively.

Is this on the radar for the plugin creator/maintainers? Are there any thoughts about this depreciation?