onKeyStroke
Listen for keyboard key being stroked.
Demo
Use the arrow keys or w a s d keys to control the movement of the ball.
Usage
import { onKeyStroke } from '@vueuse/core'
onKeyStroke('ArrowDown', (e) => {
e.preventDefault()
})
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()
})
import { onKeyStroke } from '@vueuse/core'
onKeyStroke(['s', 'S', 'ArrowDown'], (e) => {
e.preventDefault()
})
Custom Event Target
onKeyStroke('A', (e) => {
console.log('Key A pressed on document')
}, { target: document })
onKeyStroke('A', (e) => {
console.log('Key A pressed on document')
}, { target: document })
Directive Usage
This function also provides a directive version via the
@vueuse/componentspackage. Learn more about the 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>
<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' })
onKeyStroke('Shift', (e) => {
console.log('Shift key up')
}, { eventName: 'keyup' })
Or
onKeyUp('Shift', () => console.log('Shift key up'))
onKeyUp('Shift', () => console.log('Shift key up'))
Shorthands
onKeyDown- alias foronKeyStroke(key, handler, {eventName: 'keydown'})onKeyPressed- alias foronKeyStroke(key, handler, {eventName: 'keypress'})onKeyUp- alias foronKeyStroke(key, handler, {eventName: 'keyup'})
Type Declarations
Show Type Declarations
export declare type KeyPredicate = (event: KeyboardEvent) => boolean
export declare type KeyFilter =
| null
| undefined
| string
| string[]
| KeyPredicate
export declare type KeyStrokeEventName = "keydown" | "keypress" | "keyup"
export interface KeyStrokeOptions {
eventName?: KeyStrokeEventName
target?: MaybeRef<EventTarget>
passive?: boolean
}
/**
* Listen for keyboard keys being stroked.
*
* @see https://vueuse.org/onKeyStroke
* @param key
* @param handler
* @param options
*/
export declare function onKeyStroke(
key: KeyFilter,
handler: (event: KeyboardEvent) => void,
options?: KeyStrokeOptions
): Fn
/**
* Listen to the keydown event of the given key.
*
* @see https://vueuse.org/onKeyStroke
* @param key
* @param handler
* @param options
*/
export declare function onKeyDown(
key: KeyFilter,
handler: (event: KeyboardEvent) => void,
options?: Omit<KeyStrokeOptions, "eventName">
): Fn
/**
* Listen to the keypress event of the given key.
*
* @see https://vueuse.org/onKeyStroke
* @param key
* @param handler
* @param options
*/
export declare function onKeyPressed(
key: KeyFilter,
handler: (event: KeyboardEvent) => void,
options?: Omit<KeyStrokeOptions, "eventName">
): Fn
/**
* Listen to the keyup event of the given key.
*
* @see https://vueuse.org/onKeyStroke
* @param key
* @param handler
* @param options
*/
export declare function onKeyUp(
key: KeyFilter,
handler: (event: KeyboardEvent) => void,
options?: Omit<KeyStrokeOptions, "eventName">
): Fn
export declare type KeyPredicate = (event: KeyboardEvent) => boolean
export declare type KeyFilter =
| null
| undefined
| string
| string[]
| KeyPredicate
export declare type KeyStrokeEventName = "keydown" | "keypress" | "keyup"
export interface KeyStrokeOptions {
eventName?: KeyStrokeEventName
target?: MaybeRef<EventTarget>
passive?: boolean
}
/**
* Listen for keyboard keys being stroked.
*
* @see https://vueuse.org/onKeyStroke
* @param key
* @param handler
* @param options
*/
export declare function onKeyStroke(
key: KeyFilter,
handler: (event: KeyboardEvent) => void,
options?: KeyStrokeOptions
): Fn
/**
* Listen to the keydown event of the given key.
*
* @see https://vueuse.org/onKeyStroke
* @param key
* @param handler
* @param options
*/
export declare function onKeyDown(
key: KeyFilter,
handler: (event: KeyboardEvent) => void,
options?: Omit<KeyStrokeOptions, "eventName">
): Fn
/**
* Listen to the keypress event of the given key.
*
* @see https://vueuse.org/onKeyStroke
* @param key
* @param handler
* @param options
*/
export declare function onKeyPressed(
key: KeyFilter,
handler: (event: KeyboardEvent) => void,
options?: Omit<KeyStrokeOptions, "eventName">
): Fn
/**
* Listen to the keyup event of the given key.
*
* @see https://vueuse.org/onKeyStroke
* @param key
* @param handler
* @param options
*/
export declare function onKeyUp(
key: KeyFilter,
handler: (event: KeyboardEvent) => void,
options?: Omit<KeyStrokeOptions, "eventName">
): Fn
Source
Contributors
Anthony Fu
webfansplz
leovoon
Arpit
Ivan Que
Alex Kozack
yang