質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

1194閲覧

Vue3 Composition API のフォーカス制御

gosaro

総合スコア24

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2023/06/08 14:21

編集2023/06/09 00:46

実現したいこと

Vue3 Composition API でボタンを非表示から表示に変更すると同時にフォーカスを設定したい。

発生している問題・エラーメッセージ

下記のソースコードにおいてshowボタンをクリックするとボタンが表示されますがフォーカスが設定されません。

該当のソースコード

Vue

1<script setup> 2import { ref, nextTick } from 'vue' 3const visible = ref(false) 4const target = ref() 5const show = () => { 6 visible.value = true 7 nextTick(() => { 8 target.value.focus() 9 }) 10} 11</script> 12<template> 13 <div> 14 <button @click="show">show</button> 15 <button ref="target" v-show="visible">target</button> 16 </div> 17</template>

試したこと

次のソースコードにより、テキストボックスの場合は表示と同時にフォーカスを設定できることを確認しました。
(下から3行目以外は上記と同じ)

Vue

1<script setup> 2import { ref, nextTick } from 'vue' 3const visible = ref(false) 4const target = ref() 5const show = () => { 6 visible.value = true 7 nextTick(() => { 8 target.value.focus() 9 }) 10} 11</script> 12<template> 13 <div> 14 <button @click="show">show</button> 15 <input ref="target" v-show="visible" value="target"> 16 </div> 17</template>

また、次のソースコードにより、ボタンに初期フォーカスを設定できることを確認しました。

Vue

1<script setup> 2import { ref, onMounted } from 'vue' 3const target = ref() 4onMounted(() => { 5 target.value.focus() 6}) 7</script> 8<template> 9 <div> 10 <button ref="target">target</button> 11 </div> 12</template>

追記
フォーカスを設定したいボタンを <button> から <input type="button"> に変更してもフォーカスを設定することはできませんでした。
また、最初から表示された状態であってもフォーカスを設定することはできませんでした。
ソースコードを以下に示します。

Vue

1<script setup> 2import { ref } from 'vue' 3const target1 = ref() 4const target2 = ref() 5</script> 6<template> 7 <div> 8 <p> 9 <!-- focus1ボタンをクリックしてもtarget1ボタンにフォーカスが設定されない --> 10 <button @click="target1.focus()">focus1</button> 11 <input type="button" ref="target1" value="target1"> 12 </p> 13 <p> 14 <!-- focus2ボタンをクリックするとtarget2テキストボックスにフォーカスが設定される --> 15 <button @click="target2.focus()">focus2</button> 16 <input type="text" ref="target2" value="target2"> 17 </p> 18 </div> 19</template>

補足情報(FW/ツールのバージョンなど)

Windows 11
Chrome 114.0.5735.110
Node.js v17.5.0
Vue 3.3.4

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

別に投稿した次の質問に回答をいただきました。
JavaScript ボタンクリック時に他のボタンにフォーカスを設定できない

投稿2023/06/09 04:35

gosaro

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問