【Vue】初期カーソル位置を特定のinput 要素に設定する

やりたいこと

例えば検索ページにおいて、最初から検索窓にカーソルがフォーカスされていたら、ユーザーに優しいですよね、

ということでvueでカーソル位置を指定する機能を実装します。2分で終わります。

実装

１.カスタムディレクティブを作成します。

main.js

const app = createApp(App)

app.directive('focus', {
    mounted(el) {
        el.focus()
    },
})

２.フォーカスさせたいinputに対して、v-focusを付与します。これで完了です。

search.vue

<input
    id="search"
    v-focus
    required
    name="search"
    type="text"
    block
/>

結果

ページを開くと自動で検索窓にフォーカスされるようになりました。