Skip to content

onKeyStroke

聆听键盘击键。

¥Listen for keyboard keystrokes.

示例

Use the arrow keys or w a s d keys to control the movement of the ball.

Repeated events are ignored on the key `d` or `->`.

用法

¥Usage

js
import { onKeyStroke } from '@vueuse/core'

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

请参阅 此表格 了解所有关键代码。

¥See this table for all key codes.

聆听多个键

¥Listen To Multiple Keys

js
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

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

忽略重复事件

¥Ignore Repeated Events

回调仅在按住 A 时触发一次。

¥The callback will trigger only once when pressing A and hold down.

js
import { onKeyStroke } from '@vueuse/core'

// use `autoRepeat` option
onKeyStroke('A', (e) => {
  console.log('Key A pressed')
}, { dedupe: true })

参考:KeyboardEvent.repeat

¥Reference: KeyboardEvent.repeat

指令用法

¥Directive Usage

vue
<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

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

或者

¥Or

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

速记

¥Shorthands

  • onKeyDown - onKeyStroke(key, handler, {eventName: 'keydown'}) 的别名

    ¥onKeyDown - alias for onKeyStroke(key, handler, {eventName: 'keydown'})

  • onKeyPressed - onKeyStroke(key, handler, {eventName: 'keypress'}) 的别名

    ¥onKeyPressed - alias for onKeyStroke(key, handler, {eventName: 'keypress'})

  • onKeyUp - onKeyStroke(key, handler, {eventName: 'keyup'}) 的别名

    ¥onKeyUp - alias for onKeyStroke(key, handler, {eventName: 'keyup'})