fgr-araujo / vue-shortkey Goto Github PK

Hey,

Thank you for that lovely plugin. It's very useful!

My use case is following:
I open modal when "n" is pressed. Then i focus so that user can type in whatever needed. What i'd like to achieve is: when user presses "ESC" key, modal is closed. Since i use: Vue.use(ShortKey, { prevent: ['input', 'textarea'] }) and i'm in the focused input field, obviously shortcut call is prevented. I'm actually not sure how can i make ESC and only ESC work only in the input field.

Any thoughts on that?

Hello, I want to set a shortcut using ctrl + backspace but from the documentation it seems that backspace is not a valid key, it might be possible to add this key inside the valid ones.

thank you!!!

Hi Fagner Araujo,

Thank you for your useful plugin.
I have a problem and need your help.

I have a button, I want when I press Ctrl + 1, the program will execute theAction1 () and when I press Ctrl + 2, the program will execute theAction2 ().

<button
v-shortkey="[['ctrl', '1'], ['ctrl', '2']]"
@shortkey="[theAction1(), theAction2()]">Open

Currently I have no way to solve this problem.
Can you give me some suggestions or how to handle that problem?

Thank you again.

For example, see the npm page for vue, which has a link to github.com/vuejs/vue.

I'm not sure, but I'm guessing this is populated by the "repository" field in package.json.

I don't see removeEventListener anywhere in the source, so I was curious if the listeners get removed.

If I have the following template:

<template>
    <div class="template-root">
        <my-comp v-shortkey.native="['meta', 'enter']" @shortkey="() => console.log('1')" />
        <my-comp v-shortkey.native="['meta', 'enter']" @shortkey="() => console.log('2')" />
        <my-comp v-shortkey.native="['meta', 'enter']" @shortkey="() => console.log('3')" />
    </div>
</template>

and I then use the key combination, the console will only display '3', ignoring which component has focus or even if none of them has focus.

Not sure if that can be addressed at all really, but I thought I'd log that here to bring it to your attention.

I have key combinations involving Alt and Shift. On Windows, those two keys are used to switch the input language. If I have a shortkey for Alt+A, it works perfectly if I'm writing in English. However, if I accidentally switch to my other language (Bulgarian), the shortkey no longer works. I guess it's because the a key is now ь, and I have no combination set for Alt+ь.

However, I noticed that when I press the a, it has the same keycode (65) no matter what language I'm writing in. Perhaps an option can be implemented that allows you to use keycodes to monitor the keys?

Hi!

Is there a way to use the keypress event over multiple elements at the same time?

For example, I have a list of components created using v-for (i.e., the various instances use the same base component) and I would like to perform some action over all of them when pressing shift.

Thank you!

Hello there, you killed my hour :(
Please fix readme file,
escape => esc shortkey

Seems that only the last element I've added reacts to the shortcut. I added 2 elements first and tested it and only second element reacted to the shortcut, then I added the third element and only that element reacted to the shortcut.

Is this the way it should be or am I doing something strange with my components :)
I am using this inside file component which I then use to create elements with v-for.

I am also using vuex, not sure if that could somehow interfere with shortcut directive?

Here is how i am using it:

<div v-shortkey.once="['ctrl', 'alt', 'o']" @shortkey="showHeader=!showHeader" v-show="showHeader" class="content-block-header">

Basically, I want to hide the header div of every component that I've added to the list and that is being displayed on the page.

Hello,

In my application, I will used from 0 to 9 as short key, are they be supported now?

Thanks!

Hi there!

Thank you very much for this plugin!

I wanted to catch the key event backspace. But at least on a Mac the 'del' shortkey is not triggered when pressing backspace. Did I miss something or is it just not included so far? If so, could you maybe add it?

it might usually not good approach to set c as a short key but I had to do it for my purpose. so when I use input text/text area and type c , it fires up the short cut key. If there is a way to exclude the input and text areas that would be great

Got some fixes for IE11 I think but I'm getting error while running "npm run-script build" even if it says "finished".

Steps taken:

1. Download package.
2. Edit src/index.js
3. edit package.json/scripts/build to SET NODE_ENV=production & node build/build.js (im using windows).
4. run "npm run-script build"

Chrome console says " Failed to resolve directive: shortkey".
The dist/index.js file is inside the zip.

index.zip

Is it possible to have multiple shortcuts per elements somehow?

I need:

• cmd + c to copy
• cmd + d to duplicate

Having the attribute multiple times does not work:

 - duplicate attribute: v-shortkey
 - duplicate attribute: @shortkey

What should I do for the "option" key in Mac?
I tried "alt", but it doesn't work

I've been testing a few combinations and haven't gotten a keybind with more than 2 keys to work. For example, ctrl + m works but ctrl + shift + m doesn't. Additionally, ctrl + alt works but ctrl + alt + m does (although neither does alt + m...).

<template>
  <div id="app">
    <v-app
      v-shortkey="['ctrl', 'm']"
      @shortkey.native="onToggle()"
    >
      <v-content>
        <router-view/>
      </v-content>
    </v-app>
  </div>
</template>

I am using Chrome on a Mac.

It would be nice to allow the option to use "cmd" instead of "ctrl" when someone is using a mac 😊

Hi!,

I just added the vue-shortkey library to my project and I noticed some bugs in Internet Explorer 11. When I opened the developer's web console, I found the following messages:

In Spanish:

• SCRIPT438: El objeto no acepta la propiedad o el método 'find'.
  In English:
• SCRIPT438: The object does not accept the 'find' property or method.
  Here an image:
  

Am I doing something wrong or is it a bug?
Regards.

Hi

I have the following components:

A "Home" component which looks like this:

<template>
  <div class="home" v-shortkey="['a']" @shortkey="goToAdd()">
    <v-subheader>Active ({{ activeTodos.length }})</v-subheader>
    <TodoList :todos="activeTodos"></TodoList>
    <router-link to="/add">
      <v-btn fab bottom right color="pink" dark fixed>
        <v-icon>add</v-icon>
      </v-btn>
    </router-link>
  </div>
</template>

And down in the tree of the shown TodoList another component, which lets me edit the description of a todo:

<template>
  <div class="disablehotkeys">
    <span v-shortkey.avoid contenteditable class="disablehotkeys description subheading" @blur="updateDescription($event)">{{ todo.description }}</span>
  </div>
</template>

Now, when the span-tag is focused and I am typing a word with an "a", the shortkey event of the Home component is firing, even though I have disabled v-shortkey on the tag (and the div).

I am initialising vue-shortkey with Vue.use(VueShortkey, { prevent: ["input", "textarea", ".disablehotkeys"] });

How can I prevent the event from firing?

Any idea where in the code I would be looking to change to support group combinations of clicks. For example, debouncing the keyup event for 200ms to support two separate clicks of a key or clicks to two separate keys in quick succession.

Cheers.

My initial plan was to generate a shortkey from a computed property (per #28 (comment)), but it seems like it's not possible to bind the shortkey like so?

<button :v-shortkey="['ctrl', 'r']">Refresh</button>

Here's a minimal example that doesn't seem to work:

https://jsfiddle.net/danmichaelo/b4c6sd28/

Thank you for updating.
I updated to 3.0.0.
And add the code:
<span v-shortkey="{win:['ctrl', 'd'],mac:['meta', 'd']}" @shortkey="test"></span>
But the console shows:
Error in directive shortkey bind hook: "TypeError: n.join is not a function"
Is there anything I need to do?
Thank you

It is possible to prevent or override web browser sortcuts (ie Google Chrome) ?
I'm trying to use v-shortkey="['ctrl', 'tab']" | | v-shortkey="['ctrl', 's']" but chrome shortcut fires.

Thank you.

Hi there. According to the description, I can disable the shortkey by 3 ways. However, when I try to disable it at one specific component in my project which is not an input field, all methods failed. I tried to put 'v-shortkey.avoid' at the root element in that component, and put it's root element class name in the 'prevent' array. The shortkey still works. Could any one help me out? Thank you

How can I bind an action to the @ character? I do not want to assume this is the ['shift', '2'] combination, and even this does not seem to work.

I have an <input type="text" class="form-input" v-shortkey="{up: ['arrowup'], down: ['arrowdown'], tab: ['tab'], esc: ['esc'], enter: ['enter']}" @shortkey="handleShortcut"> input box in my project. It works fine however, it invokes these keyboard shortcuts throughout the app. I understand that this is the standard behavior of vue-shortkey however, it is breaking some functionality of vue-tags-input.

vue-tags-input creates an input box like this: <input type="text" class="new-tag-input valid"> which allows the user to enter tags and use arrow keys to select suggestions. To avoid the conflict, I am initializing vue-shortkey like this:

Vue.use(VueShortkey, { prevent: ['input.valid'] });

While this fixed my issue with vue-tags-input (I am able to use my arrow keys to select tags), it broke my other input above (the one with class="form-input" which actually has the v-shortkey attribute). vue-shortkey has disabled all shortcuts on input.form-input. I am using vue-shortkey version 3.1.0. How can I fix this?

Shortkeys do not work if i change keyboard layout from english to russian or other layouts.
If i define ['ctrl', 'a'] shortkey and then change language then shortkey is not working, but if define it in the target language then in works. For example:

['ctrl', 'a'] -- is not working in russian or other non ASCII language
['ctrl', 'ф'] -- works in russian
( 'a' and 'ф' share same key on keyboard)

Ofcourse this is not a bug, but just a little inconvenience. Is there a way to define shortkeys that would work if the letters share same keyboard key
independently from selected language?

UPD:
Solution: https://www.npmjs.com/package/vue-shortkey#multi-keys. So i can define key combinatioins for all target languages

The documentation says it's v-shortkey.void but it's actually avoid. Had to look at the code to figure out what was going on.

Hi,

I noticed that the build of vue-shortkey include the sourcemaps. These should not be there. Could you recompile the bundle with NODE_ENV=production and republish your package ?

Thanks !

Hi
Is there no key for delete ?

Is it possible to use this plugin without webpack/commonJS?
I have a project where Vue JS is being used as standalone. Is there a way to use this plugin in a setup like that ?

e.g.,

<script src="/vendor/redprint/vendor/vue/vue.min.js"></script>
<script>
        var app = new Vue({
        .....
        .....

Thanks!

If the shortcut is applied to a button / element with a click event, it would be nice to fallback to triggering the click handler if not shortkey event handler is declared.

I would like to use / or ? in my application with shortcuts is it possible to add them?

This package is great.

v-shortkey.push calls the handler twice: On key-down and on key-up. Is there any way how the handler can distinguish between the two calls (except for counting)?

If not --- can some data be added to the event argument to enable this distinction?
This would help a lot.

Hello @iFgR and 👏 👏 👏 for this package

Just wondering, would you recommend a way to use shortkey on a long table with inputs on each row ?
Something like @shortkey="['ctrl', 'n']" to focus on next input and @shortkey="['ctrl', 'p']" to focus on previous input ?

Thank you

Hi, this plugin is good!!

But I found a problem.

It works:
<div v-shortkey="['ctrl', 'p']" @shortkey="test"></div>

It doesn't work:
<my-component v-shortkey="['ctrl', 'p']" @shortkey="test"></my-component>

Is there any way to solve the issue?

Does this plugin support a sequence of keys to activate a shortcut? for example if I hit "up up down down" in order can this be detected as a single hotkey?

I'm trying to add a shortcut to a vue router link but I can't figure out what I need to do to get it working:

<router-link v-shortkey.once="['ctrl', 'shift', 't']" @shortkey="navigate" to="/items/add">
   Add Item                                                   
</router-link>

The "navigate" method referenced in the "shortkey" event handler is never called. What do I need to do to get this to work?

I am using vue-shortkey to track whether the Alt key is pressed. It works perfectly, but not if you press another modifier key like Shift or Control. For example:

✔️ Alt (press) -> emit -> Alt (release) -> emit
✔️ Alt (press) -> emit -> Ctrl (press) -> Ctrl (release) -> Alt (release) -> emit
❌ Alt (press) -> emit -> Ctrl (press) -> Alt (release) -> does not emit -> Ctrl (release)
❌ Shift (press) -> Alt (press) -> does not emit -> Alt (release) -> does not emit -> Shift (release)

Check this fiddle for a demo (make sure to focus the results panel). If you press Alt, then Ctrl and release Alt, the boolean value no longer displays whether the alt key is pressed, but rather - if it's released. That's because the release event for Alt is lost.

Browser:
Name: Google Chrome
Version: 72.0.3626.109 (Official Build) (64-bit)

OS:
Name: Microsoft Windows 10 Home
Version: 10.0.17134 Build 17134

Keyboard:
Name: Enhanced (101- or 102-key)
Description: Standard PS/2 Keyboard
Layout: 00000409

Nothing major, but in the key list it says escape, however esc seems to be the one that worked for me:

v-shortkey="[ 'esc' ]"

Hey,

I'm not sure this is the right place to ask this but why do I need to add it to a button or div?
Is there a way to add a listener for the same keys shortcuts without binding it to an html componant?

Really cool plugin btw (just discovered it)

Thanks!

I'm having trouble binding "?". I tried ['?'] and ['shift', '/'] with no luck. How can I bind to this combination ?

Also is it possible to bind two key combinations to one srcKey e.g. I want to have 'help' invoked by 'h' or by '?'

Check if the function keys are mapped.
Keys like volume up, volume down stop, play, pause and so on...

I set up code like <button v-shortkey="['esc']" @shortkey="() => { console.log('esc') }">test</button>
but esc become catching all over the page.
I have several shortkeys over the page and don't want to block them all over some element, only particular one. What I do wrong?

The dist build has not been updated for the last version bump, i.e. v3.1.2 has the same dist build as v.3.1.3. Furthermore, v3.1.3 has been tagged on npm but there is no corresponding tag on github.

Hello, was wondering if you would support the addition of new keys. Space is a very useful one to play and pause video. There are some presentation remotes that use Page Up and Page Down as previous/next buttons, so they would be useful as well.

I need the (alredy merged) pull request #70 with support for the backspace key.

In the version 3.1.6 on NPM that pull request is sadly not yet included.
Could you please bump the NPM version of the package?

It would be handy to be able to use the prevent function with a subset of keys.

For example, it could make sense to use F-Keys in input fields to change a focus or open a dialog etc.