index.md

category
Sensors

onKeyStroke

Listen for keyboard key being stroked.

Usage

import { onKeyStroke } from '@vueuse/core'

onKeyStroke('ArrowDown', (e) => {
  e.preventDefault()
})

See this table for all key codes.

Listen To Multiple Keys

import { onKeyStroke } from '@vueuse/core'

onKeyStroke(['s', 'S', 'ArrowDown'], (e) => {
  e.preventDefault()
})

// listen to all keys by [true / skip the keyDefine]
onKeyStroke(true, (e) => {
  e.preventDefault()
})
onKeyStroke((e) => {
  e.preventDefault()
})

Custom Event Target

onKeyStroke('A', (e) => {
  console.log('Key A pressed on document')
}, { target: document })

Directive Usage

<script setup lang="ts">
import { vOnKeyStroke } from '@vueuse/components'
function onUpdate(e: KeyboardEvent) {
  // impl...
}
</script>

<template>
  <input v-on-key-stroke:c,v="onUpdate" type="text">
  <!-- with options -->
  <input v-on-key-stroke:c,v="[onUpdate, { eventName: 'keyup' }]" type="text">
</template>

Custom Keyboard Event

onKeyStroke('Shift', (e) => {
  console.log('Shift key up')
}, { eventName: 'keyup' })

Or

onKeyUp('Shift', () => console.log('Shift key up'))

Shorthands

• onKeyDown - alias for onKeyStroke(key, handler, {eventName: 'keydown'})
• onKeyPressed - alias for onKeyStroke(key, handler, {eventName: 'keypress'})
• onKeyUp - alias for onKeyStroke(key, handler, {eventName: 'keyup'})