CODEWITHSUNDEEP
javascriptvue.jsshortcutkeyeventkeyup
seyet
seyet

Reputation: 1150

adding a keyboard shortcut to your button in vuejs

I have a button that does something when clicking on it with mouse. I want the same method to also be triggered when pressing on your keyboard's up arrow key.

<button @click="doSomething()"> PRESS ME </button>

doSomething(){
  console.log('clicked')
}

So in this example I want to console.log('clicked') when pressing on keyboard's up arrow. How can I do that?

Upvotes: 2

Views: 2566

Answers (4)

pxeba
pxeba

Reputation: 1806

From vue docs
better examples

I haven't found a vue solution that works global. For those looking for component/html specific shortcuts

"When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for v-on or @ when listening for key events:"

<input @keydown.up="onPressUp" />

Upvotes: 0

Mohammad Hosseini Parto
Mohammad Hosseini Parto

Reputation: 761

You can use the following as all click events and keyboard shortcuts:

<template>
  <div id="app">
    <button @click.ctrl="onClick">Ctrl + Click me</button>
    <button @click.alt="onClick">Alt + Click me</button>
    <button @click.ctrl.exact="onClick">Ctrl exact + Click me</button>
    <button @click.left="onClick">Left mouse button</button>
    <button @click.right="onClick">Right mouse button</button>
    <button @click.middle="onClick">Middle mouse button</button>
  </div>
</template>

Upvotes: 0

Đỗ văn Thắng
Đỗ văn Thắng

Reputation: 185

Hope it can help you.

doSomething(){
  console.log('clicked')
}

var buttonBtn = document.getElementById("btn");
buttonBtn.addEventListener("keyup", function(event) {
  event.preventDefault();
  this.doSomething();
});
<button id="btn" @click="doSomething()"> PRESS ME </button>

Upvotes: 0

DengSihan
DengSihan

Reputation: 3007

you may use onkeystroke from vueuse

<template>
  <div>
    <button @click="doSomething">btn</button>
  </div>
</template>

<script setup>
import { onKeyStroke } from '@vueuse/core';

const doSomething = () => {
  console.log('do something');
}

onKeyStroke(['ArrowUp'], (e) => {
  doSomething();
});
</script>

another demo here

stackblitz.com doesn't support <script setup> so in this demo, it is written in setup()

update

pure js without library:

<template>
    <div>
        <button
            @click="doSomething">
            btn
        </button>
    </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';

const doSomething = () => {
    console.log('doSomething');
};

const userClickArrowUp = ({ code }) => {
    if (code === 'ArrowUp') {
        doSomething();
    }
};

onMounted(() => {
    document.addEventListener('keyup', userClickArrowUp, true);
})

onBeforeUnmount(() => {
    document.removeEventListener('keyup', userClickArrowUp, true);
})

</script>

Upvotes: 4

Related Questions