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

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 を返します。これを使用して、ユーザーがページを操作しているかどうかを判断できます。

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

以下もご興味があるかもしれません:
  • javascript+HTML5 カスタム要素がフォーカス画像アニメーションを再生します
  • フォーカス要素コードを取得するにはJSを使用する
  • 要素フォーカスに関する JavaScript (非表示要素と div)

<<:  テーブルの幅を固定して、テキストによって幅が変わらないように設定

>>:  CSSは下部のタップバー機能を実装します

推薦する

HTML テキストエスケープのヒント

今日、CSDN で HTML テキスト エスケープのちょっとしたトリックを見ましたが、とても簡単です...

Dockerコマンドの自動補完の実装

序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...

CocosCreatorのホットアップデートの包括的な説明

目次序文ホットチェンジとはCocos Hot アップデートの概要マニフェストプロジェクトリソースとゲ...

Vueプロジェクトでよく使われる実践的なスキルのまとめ

目次序文1. マルチレベルのデータとイベントの配信には$attrsと$listenersを使用する2...

Linux システムで Java 環境変数を設定する方法

Java環境変数を設定するここで、環境変数は etc/profile に設定され、つまり、すべてのユ...

Docker に influxdb をインストールするための詳細なチュートリアル (パフォーマンス テスト)

1. 前提条件1. プロジェクトが展開されました2. Dockerはすでにインストールされている2...

MySQL 重複インデックスと冗長インデックスの例の分析

この記事では、例を使用して MySQL の重複インデックスと冗長インデックスについて説明します。ご参...

js でクラスセレクターと名前属性セレクターを実装する手順の例

jQuery の登場により、DOM の操作効率が大幅に向上し、開発がより高いレベルに引き上げられまし...

シンプルなHTMLとCSSの使い方の詳細な説明

HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます...

docker ログが取得できない問題の解決方法

毎日サービスをチェックしているときに、portainer からコンテナ ログを確認しようとしたところ...

優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス

ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...

WeChatアプレットで画像の幅と高さを取得する方法

起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがありま...

HTML印刷関連の操作と実装の詳細な説明

原則的にはwindow.print()メソッドを呼び出すことですが、このメソッドは現在のページ全体を...

clearfixとclearの例

この記事では、CSS を理解し始めたばかりの人を対象に、主に HTML で clearfix と c...

MySQLのさまざまなロックの概念的理解

楽観的ロック楽観的ロックは、主にデータ バージョン記録メカニズムに基づいて実装され、通常はデータベー...