category |
---|
Sensors |
Listen for keyboard key being stroked.
import { onKeyStroke } from '@vueuse/core'
onKeyStroke('ArrowDown', (e) => {
e.preventDefault()
})
See this table for all key codes.
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()
})
onKeyStroke('A', (e) => {
console.log('Key A pressed on document')
}, { target: document })
<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>
onKeyStroke('Shift', (e) => {
console.log('Shift key up')
}, { eventName: 'keyup' })
Or
onKeyUp('Shift', () => console.log('Shift key up'))
onKeyDown
- alias foronKeyStroke(key, handler, {eventName: 'keydown'})
onKeyPressed
- alias foronKeyStroke(key, handler, {eventName: 'keypress'})
onKeyUp
- alias foronKeyStroke(key, handler, {eventName: 'keyup'})