onKeyStroke

キーボードのキー入力を監視します。

使用法

import { onKeyStroke } from '@vueuse/core'

onKeyStroke('ArrowDown', (e) => {
  e.prevent止fault()
})

すべてのキーコードについてはこのテーブルを参照してください。

複数のキーを監視する

import { onKeyStroke } from '@vueuse/core'

onKeyStroke(['s', 'S', 'ArrowDown'], (e) => {
  e.prevent止fault()
})

// [true / keyDefineをスキップ]で全てのキーを監視
onKeyStroke(true, (e) => {
  e.prevent止fault()
})
onKeyStroke((e) => {
  e.prevent止fault()
})

カスタムイベントターゲット

import { onKeyStroke } from '@vueuse/core'
// ---cut---
onKeyStroke('A', (e) => {
  console.log('ドキュメント上でキーAが押されました')
}, { target: document })

繰り返しイベントを無視する

コールバックは A を押して押し続けたときに一度だけトリガーされます。

import { onKeyStroke } from '@vueuse/core'
// ---cut---
// `autoRepeat` オプションを使用
onKeyStroke('A', (e) => {
  console.log('キーAが押されました')
}, { dedupe: true })

参考: KeyboardEvent.repeat

ディレクティブの使用法

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

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

<template>
  <input v-on-key-stroke:c,v="onUpdate" type="text">
  {/* オプション付き */}
  <input v-on-key-stroke:c,v="[onUpdate, { eventName: 'keyup' }]" type="text">
</template>

カスタムキーボードイベント

import { onKeyStroke } from '@vueuse/core'
// ---cut---
onKeyStroke('Shift', (e) => {
  console.log('Shiftキーが上がりました')
}, { eventName: 'keyup' })

または

import { onKeyUp } from '@vueuse/core'
// ---cut---
onKeyUp('Shift', () => console.log('Shiftキーが上がりました'))

ショートハンド

• onKeyDown - onKeyStroke(key, handler, {eventName: 'keydown'}) のエイリアス
• onKeyPressed - onKeyStroke(key, handler, {eventName: 'keypress'}) のエイリアス
• onKeyUp - onKeyStroke(key, handler, {eventName: 'keyup'}) のエイリアス