JavaScript の document.activeELement フォーカス要素の紹介

序文：

場合によっては、ページのフォーカスがどの要素にあるかを取得する必要があります。フォーカスは、ユーザーがページを操作しているかどうか、およびその他の情報を判断するために使用できます。以前は自分で記録する必要があったため、便利ではありませんでした。HTML5 html5 、現在アクティブなフォーカスを取得するための了document.activeElement屬性。

1. デフォルトの焦点はボディにあります

ページが読み込まれると、document.activeElement が body に配置されます。

console.log(ドキュメント.activeElement);

// コンソール出力:

//体

2. テキストボックスのフォーカスを手動で取得する

フォーカスを取得する最も一般的な方法は、フォーム要素を使用することです。ここでは、テキスト ボックスを例に挙げます。

<input type="text" id="名前" />

テキスト ボックスにカーソルを置くと、コンソールにdocument.activeElementオブジェクトが表示されます。

ドキュメント.アクティブ要素:

上でフォーカスされるのはテキスト ボックスです。

3. 集中することで集中力を高める

テキスト ボックスに手動で配置してテキスト ボックスにフォーカスを当てるだけでなく、 focus()メソッドを使用してテキスト ボックスにフォーカスを当てることもできます。

<input type="text" id="名前" />

<script type="text/javascript">

    // テキスト ボックスの角度を取得します。 document.querySelector("#name").focus();

    console.log(ドキュメント.activeElement);

    // Firefox ブラウザのコンソールに次のように表示されます:

    // <input id="名前" type="テキスト">

</スクリプト>

4. タブ切り替えフォーカス

ウェブページ上のタブからフォーカスを切り替えることができます。別のボタンを試してみましょう。

<input type="text" id="名前" />

<button>クリックしてください</button>

効果を確認しやすくするために、5 秒後に document.activeElement を印刷するタイマーを設定します。

タイムアウトを設定する(() => {

    console.log(ドキュメント.activeElement);

    // Firefox ブラウザのコンソールに次のように表示されます:

    // <ボタン>

}, 5000);

ページにアクセスし、タブでボタンに切り替えて、コンソール出力を表示します。

タブ切り替えフォーカス:

5. document.hasFocus()はフォーカスを取得するかどうかを決定する

同様にタイマーを設定して表示します:

タイムアウトを設定する(() => {

    console.log(document.hasFocus());

}, 5000);

• ページにアクセスした際に、別のページに切り替えて 5 秒後に再度確認すると、 falseになります。ユーザーがページを操作していないことを示します。
• ページに留まっているか、ページ上で操作している場合は true を返します。これを使用して、ユーザーがページを操作しているかどうかを判断できます。

JavaScriptのdocument.activeELement focus 要素に関するこの記事はこれで終わりです。JavaScript JavaScript document.activeELement focus 要素についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。