HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM hasFocus()メソッドとは？フォーカス状態を判定する方法を解説

HTML DOMのhasFocus()メソッドは、ドキュメントまたはその内部の要素がフォーカスを持っているかどうかを確認するために使用されます。このメソッドはブール値（true / false）を返し、trueであればドキュメントや要素がフォーカスを持っていること、falseであればフォーカスを持っていないことを表します。

構文

hasFocus()メソッドの構文は以下の通りです。

document.hasFocus()

サンプルコード

それでは、hasFocus()メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>hasFocus() method</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button id="BTN1">CHECK</button>
<script>
    setInterval("checkFocus()", 20);
    function checkFocus() {
        var b = document.getElementById("BTN1");
        if (document.hasFocus()) {
            b.innerHTML = "FOCUSED";
        } else {
            b.innerHTML = "NOT FOCUSED";
        }
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような出力が得られます。

HTML DOM hasFocus()メソッドとは？フォーカス状態を判定する方法を解説

ドキュメント内の任意の場所をクリックすると、ボタンの表示が「NOT FOCUSED」から「FOCUSED」に変化します。

HTML DOM hasFocus()メソッドとは？フォーカス状態を判定する方法を解説

コードの解説

上記の例では、以下のような処理を行っています。

まず、checkFocus()という関数を作成し、その中でgetElementById()メソッドを使ってボタン要素を取得しています。続いてhasFocus()メソッドを呼び出してドキュメントがフォーカスを持っているかどうかを判定し、その結果に応じて条件分岐を実行します。document.hasFocus()がtrueを返した場合とfalseを返した場合で、ボタンに表示されるテキストが切り替わる仕組みです。

function checkFocus() {
    var b = document.getElementById("BTN1");
    if (document.hasFocus()) {
        b.innerHTML = "FOCUSED";
    } else {
        b.innerHTML = "NOT FOCUSED";
    }
}

ドキュメントをクリックすれば常にフォーカスが当たるため、この例ではsetInterval()メソッドを使用して、checkFocus()関数を20ミリ秒ごとに繰り返し実行しています。これにより、ドキュメントが現在フォーカスを持っているかどうかを常時監視できるようになっています。

setInterval("checkFocus()", 20);

まとめ

hasFocus()メソッドは、ユーザーが現在ページを操作しているかどうかを簡単に判定できる便利なAPIです。動画の自動再生の一時停止や、通知の表示制御など、フォーカス状態に応じた動的なUIの実装に活用できます。

  1. HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

    HTML DOM の writeln() メソッドは、複数の式（HTML や JavaScript）をドキュメントに直接書き込むための機能を提供します。注意： このメソッドは、ドキュメント内に既存の HTML コードがある場合、それを上書きします。また、渡された引数はそれぞれ新しい行に追加される点が特徴です。構文writeln() メソッドの基本的な構文は以下の通りです。document.writeln(argument1, argument2, ...)カンマで区切ることで、複数の引数（文字列や HTML 要素など）を一度に渡すことができます。各引数は改行されて出力されます。writeln(

  2. HTML DOM write()メソッドとは?構文と使い方を実例で解説

    HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。構文write() メソッド