ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript で「要素をフォーカス可能」にするにはどうすればよいですか?

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-05 11:04:02850ブラウズ

How Can I Make a `` Element Focusable in 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。