JavaScript で「要素をフォーカス可能」にするにはどうすればよいですか?-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-11-05 11:04:02

オリジナル

924 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：if ステートメントでは「0」が True と評価されるのに、比較では False と評価されるのはなぜですか? 次の記事：TCP と UDP プロトコル

このウェブサイトの声明

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

著者別の最新記事