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

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

新規登録して質問してみよう
ただいま回答率
85.42%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1325閲覧

JavaScript ボタンクリック時に他のボタンにフォーカスを設定できない

gosaro

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/06/09 02:30

実現したいこと

ボタンクリック時に他のボタンにフォーカスを設定したい。

前提

昨日投稿した以下の質問について調査したところ、Vueを使用しなくても同様の現象が発生することがわかったので、別の質問として投稿します。
Vue3 Composition API のフォーカス制御

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

ボタンクリック時に他のボタンにフォーカスを設定できない。

該当のソースコード

html

1<p> 2 <!-- focus1ボタンをクリックしてもtarget1ボタンにフォーカスが設定されない --> 3 <button onclick="document.getElementById('target1').focus()">focus1</button> 4 <input type="button" id="target1" value="target1"> 5</p> 6<p> 7 <!-- focus2ボタンをクリックするとtarget2テキストボックスにフォーカスが設定される --> 8 <button onclick="document.getElementById('target2').focus()">focus2</button> 9 <input type="text" id="target2" value="target2"> 10</p>

試したこと

Chrome と Edge で確認しました。

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

Windows 11
Chrome 114.0.5735.110
Edge 114.0.1823.41

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

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

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

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

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

guest

回答2

0

ベストアンサー

focus1ボタンをクリックしたとき、target1ボタンにフォーカスは移動していると思います。フォーカスリングが出ていない(:focus-visibleではない)だけです。スペースキーなどを押すとtarget1が反応するのがわかると思います。

Chromiumのバグとして登録されているようです。
https://bugs.chromium.org/p/chromium/issues/detail?id=1317039

投稿2023/06/09 03:12

int32_t

総合スコア21258

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

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

gosaro

2023/06/09 04:29

回答ありがとうございます。 ご指摘のとおりフォーカスリングが表示されていないだけで、フォーカスは設定されていることを確認しました。 また、リンク先を拝見し、:focus-visibleについても調べてみました。 これはバグというよりは仕様(そうあるべくしてそのように実装している)のようですね。
guest

0

とりあえず:focus擬似クラスでそれっぽくみせればよいでしょう

CSS

1<style> 2:focus { 3 border-radius:3px; 4 border: 1px solid gray; 5 outline: 1px solid rgba(0,0,255,0.8); 6} 7</style> 8<p> 9<button onclick="target1.focus()">focus1</button> 10<input type="button" id="target1" value="target1"> 11</p> 12<p> 13<button onclick="target2.focus()">focus2</button> 14<input type="text" id="target2" value="target2"> 15</p>

投稿2023/06/09 03:48

yambejp

総合スコア115447

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問