onKeyStroke

分類

感測器

匯出大小

702 B

上次變更

5 天前

監聽鍵盤按鍵敲擊。

範例

原始碼

使用方向鍵或 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 鍵並按住不放時，回調函數只會觸發一次。

import { onKeyStroke } from '@vueuse/core'

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

或

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'}) 的別名

類型宣告

顯示類型宣告

typescript

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.dev.org.tw/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.dev.org.tw/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.dev.org.tw/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.dev.org.tw/onKeyStroke
 * @param key
 * @param handler
 * @param options
 */
export declare function onKeyUp(
  key: KeyFilter,
  handler: (event: KeyboardEvent) => void,
  options?: Omit<OnKeyStrokeOptions, "eventName">,
): () => void