JavaScript で「要素をフォーカス可能」にするにはどうすればよいですか?

のフォーカスにアクセスします。 JavaScript による要素

特定の要素 (入力やボタンなど) には固有のフォーカス機能があるにもかかわらず、

にネイティブにフォーカスすることはできません。

TabIndex の割り当て

でのフォーカスを有効にするには、それに tabindex 属性を割り当てる必要があります。ページのタブ オーダー内での位置。 tabindex に 0 を割り当てると、ユーザーまたは JavaScript を通じて要素にフォーカスできるようになります。

<code class="html"><div id="tries" tabindex="0">You have 3 tries left</div></code>

JavaScript を使用したフォーカスの設定

tabindex を割り当てた後、要素はfocus() 関数を使用してプログラムでフォーカスできます。

<code class="javascript">document.getElementById('tries').focus();</code>

考慮事項

• tabindex を -1 にすると、要素は JavaScript を通じてのみフォーカス可能になります。ユーザー インタラクション。
• フォーカス可能な要素は、フォーカス時にキーボード イベントとスタイル設定 (背景色の変更など) を受け取ることができます。
• アクセシビリティの観点から、ユーザーがフォーカスできない要素に tabindex を割り当てることは避けてください。

例

次の例は、フォーカスの割り当てと視覚的なキューを示しています。

<code class="html"><style>
div:focus {
    background-color: Aqua;
}
</style>

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>

<div id="test" onclick="document.getElementById('scripted').focus();">Set Focus To Element Z</div></code>

以上がJavaScript で「要素をフォーカス可能」にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。