useFocus

DOM要素のフォーカス状態を追跡または設定するためのリアクティブユーティリティです。状態はターゲット要素がフォーカスされているかどうかを反映します。外部からリアクティブな値を設定すると、それぞれ true と false の値に対して focus と blur イベントがトリガーされます。

基本的な使い方

import { useFocus } from '@vueuse/core'

const target = shallowRef()
const { focused } = useFocus(target)

watch(focused, (focused) => {
  if (focused)
    console.log('入力要素がフォーカスされました')
  else console.log('入力要素のフォーカスが外れました')
})

初期フォーカスの設定

要素を初回レンダリング時にフォーカスするには、initialValue オプションを true として提供します。これにより、ターゲット要素で focus イベントがトリガーされます。

import { useFocus } from '@vueuse/core'

const target = shallowRef()
const { focused } = useFocus(target, { initialValue: true })

フォーカス状態の変更

focused リアクティブリファレンスの変更は、それぞれ true と false の値に対して自動的に focus と blur イベントをトリガーします。この動作を利用して、他のアクションの結果としてターゲット要素にフォーカスを当てることができます（例：以下に示すようにボタンクリック時）。

<script setup lang="ts">
import { useFocus } from '@vueuse/core'
import { shallowRef } from 'vue'

const input = shallowRef()
const { focused } = useFocus(input)
</script>

<template>
  <div>
    <button type="button" @click="focused = true">
      下の入力にフォーカスするにはクリックしてください
    </button>
    <input ref="input" type="text">
  </div>
</template>