onKeyStroke

分类

传感器

导出大小

784 B

上次更改

8 个月前

监听键盘按键事件。

演示

源码在线试用 (beta)

使用方向键或 w a s d 键来控制球的移动。

对按键 `d` 或 `->` 重复的事件将被忽略。

用法

import { onKeyStroke
 } from '@vueuse/core'

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

所有按键代码请参阅此表格。

监听多个按键

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
 })

忽略重复事件

回调函数只会在按下 `A` 键并 **按住不放** 时触发一次。

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

参考: KeyboardEvent.repeat

指令用法

此函数还通过 @vueuse/components 包提供了一个指令版本。了解更多用法。

vue

<script setup lang="ts">
import { vOnKeyStroke
 } from '@vueuse/components'

function onUpdate
(e
: KeyboardEvent) {
  // impl...
}
</script>

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

自定义键盘事件

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

或者

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

快捷方式

onKeyDown - onKeyStroke(key, handler, {eventName: 'keydown'}) 的别名
onKeyPressed - onKeyStroke(key, handler, {eventName: 'keypress'}) 的别名
onKeyUp - onKeyStroke(key, handler, {eventName: 'keyup'}) 的别名

类型声明

显示类型声明

export type KeyPredicate
 = (event
: KeyboardEvent) => boolean
export type KeyFilter
 = true | string | string[] | KeyPredicate

export type KeyStrokeEventName
 = "keydown" | "keypress" | "keyup"
export interface OnKeyStrokeOptions {
  eventName
?: KeyStrokeEventName

  target
?: MaybeRefOrGetter
<EventTarget | null | undefined>
  passive
?: boolean
  /**
   * Set to `true` to ignore repeated events when the key is being held down.
   *
   * @default false
   */
  dedupe
?: MaybeRefOrGetter
<boolean>
}
/**
 * Listen for keyboard keystrokes.
 *
 * @see https://vueuse.org.cn/onKeyStroke
 */
export declare function onKeyStroke
(
  key
: KeyFilter
,
  handler
: (event
: KeyboardEvent) => void,
  options
?: OnKeyStrokeOptions,
): () => void
export declare function onKeyStroke
(
  handler
: (event
: KeyboardEvent) => void,
  options
?: OnKeyStrokeOptions,
): () => void
/**
 * Listen to the keydown event of the given key.
 *
 * @see https://vueuse.org.cn/onKeyStroke
 * @param key
 * @param handler
 * @param options
 */
export declare function onKeyDown
(
  key
: KeyFilter
,
  handler
: (event
: KeyboardEvent) => void,
  options
?: Omit
<OnKeyStrokeOptions, "eventName">,
): () => void
/**
 * Listen to the keypress event of the given key.
 *
 * @see https://vueuse.org.cn/onKeyStroke
 * @param key
 * @param handler
 * @param options
 */
export declare function onKeyPressed
(
  key
: KeyFilter
,
  handler
: (event
: KeyboardEvent) => void,
  options
?: Omit
<OnKeyStrokeOptions, "eventName">,
): () => void
/**
 * Listen to the keyup event of the given key.
 *
 * @see https://vueuse.org.cn/onKeyStroke
 * @param key
 * @param handler
 * @param options
 */
export declare function onKeyUp
(
  key
: KeyFilter
,
  handler
: (event
: KeyboardEvent) => void,
  options
?: Omit
<OnKeyStrokeOptions, "eventName">,
): () => void