JavaScript フォーカスイベント

概要: このチュートリアルでは、ユーザーがフォーカスしている要素を追跡する JavaScript フォーカスイベントについて学習します。

JavaScript フォーカスイベントの概要

focus イベントは、要素がフォーカスを取得または喪失したときに発生します。主なフォーカスイベントは次の 2 つです。

focus は、要素がフォーカスを取得したときに発生します。
blur は、要素がフォーカスを失ったときに発生します。

focusin と focusout は focus と blur と同時に発生しますが、focus と blur はバブリングが発生しないのに対し、これらはバブリングが発生します。

フォーカス可能な要素は以下のとおりです。

ウィンドウは、Alt+Tab を使用するか、クリックして前面に移動するとフォーカスを取得し、背面に送るとフォーカスを失います。
マウスまたはキーボードを使用した場合のリンク。
キーボードまたはマウスを使用した場合の、入力テキストなどのフォームフィールド。
キーボードまたはマウスを使用した場合の、tabindex が設定された要素。

JavaScript フォーカスイベントの例

次の例は、focus イベントと blur イベントを処理する方法を示しています。password フィールドにフォーカスを移動すると、背景が yellow に変わります。マウスを username フィールドに移動すると、背景が white に変わります。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Focus Events</title>
</head>
<body>
    <p>Move focus to the password field to see the effect:</p>

    <form id="form">
        <input type="text" placeholder="username">
        <input type="password" placeholder="password">
    </form>

    <script>
        const pwd = document.querySelector('input[type="password"]');

        pwd.addEventListener('focus', (e) => {
            e.target.style.backgroundColor = 'yellow';
        });

        pwd.addEventListener('blur', (e) => {
            e.target.style.backgroundColor = '';
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

まとめ

focus イベントを使用して、要素がフォーカスを取得または喪失したときの状態を処理します。

このチュートリアルは役に立ちましたか？