JavaScriptでフォーカス時に処理を実行する方法

Webページのインタラクティブな要素として、入力フォームは重要な役割を果たします。この記事では、JavaScriptを使用して、フォーム要素にフォーカスが当たったときに特定の処理を実行する方法を詳しく紹介します。

HTMLの準備
JavaScriptでのイベントリスナーの設定
実行例と処理のカスタマイズ
フォーカスが外れた時の処理
Inline Event Handlerの利用
サンプルコード
まとめ

HTMLの準備

まずはじめに、フォーカス時の処理を実行したいHTML要素を作成します。ここでは、シンプルなテキスト入力フォームを例にします。

<input type="text" id="inputField" placeholder="ここにテキストを入力">

この例では、id属性にinputFieldを指定して、後でJavaScriptから簡単にこの要素を取得できるようにしています。

JavaScriptでのイベントリスナーの設定

次に、JavaScriptを使ってフォーカスイベントを検知し、特定の関数を実行するように設定します。

// イベントハンドラの関数を定義
function handleFocus(event) {
    // ここにフォーカス時に実行したい処理を書く
    console.log('Element is focused:', event.target);
}

// 対象の要素を取得
const inputField = document.getElementById('inputField');

// focus イベントをリスンするように設定
inputField.addEventListener('focus', handleFocus);

このhandleFocus関数は、フォーカス時に実行されるイベントハンドラです。addEventListenerメソッドを用いて、focusイベントが発生したときにこの関数が実行されるように設定します。

実行例と処理のカスタマイズ

上記の設定により、テキスト入力フォームにフォーカスが当たったときに、Element is focused:とその要素の情報がコンソールに出力されます。

このhandleFocus関数内で、フォーカスが当たったときに実行したい任意の処理を記述することができます。例えば、フォーカス時に入力フォームの背景色を変更するなどの処理を追加できます。

フォーカスが外れた時の処理

focusイベントに対応する形で、フォーカスが外れたときに実行されるblurイベントもあります。これを利用することで、フォーカスが外れたときの処理も簡単に実装できます。

Inline Event Handlerの利用

別の方法として、HTMLの要素に直接JavaScriptのコードを書くInline Event Handlerもあります。

<input type="text" onfocus="handleFocus()" placeholder="ここにテキストを入力">

function handleFocus() {
    console.log('Element is focused');
}

ただし、この方法はHTMLとJavaScriptが密接に結びついてしまうため、メンテナンスが難しくなる場合があります。これを避けるためにも、可能な限りイベントリスナーを使用することが推奨されます。

サンプルコード

実例として、フォームのテキスト入力フィールドにフォーカスが当たると背景色が変わり、フォーカスが外れると元の背景色に戻るというシンプルな機能を実装してみましょう。

HTML

テキスト入力フィールドを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Focus Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <input type="text" id="inputField" placeholder="ここにテキストを入力">
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

デフォルトの背景色を設定します。

#inputField {
    background-color: #FFFFFF; /* デフォルトの背景色は白 */
    padding: 10px;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
}

JavaScript (script.js)

focusイベントが発生したときに背景色を変更し、blurイベントが発生したときに背景色を元に戻します。

// イベントハンドラの関数を定義：フォーカス時
function handleFocus() {
    // フォーカス時に背景色を薄い青に変更
    this.style.backgroundColor = '#D0EFFF';
}

// イベントハンドラの関数を定義：フォーカスが外れた時
function handleBlur() {
    // フォーカスが外れたときに背景色を白に戻す
    this.style.backgroundColor = '#FFFFFF';
}

// 対象の要素を取得
const inputField = document.getElementById('inputField');

// focus イベントをリスンするように設定
inputField.addEventListener('focus', handleFocus);

// blur イベントをリスンするように設定
inputField.addEventListener('blur', handleBlur);

解説

ユーザーがテキスト入力フィールドにフォーカスを当てると（例えば、そのフィールドをクリックすると）、背景色が薄い青色（#D0EFFF）に変わります。
ユーザーがフォーカスを他の場所に移すと（例えば、他の場所をクリックするか、Tabキーを押すなどしてフォーカスが外れると）、背景色が白色（#FFFFFF）に戻ります。

まとめ

この記事では、JavaScriptを用いて、特定のHTML要素にフォーカスが当たったときに処理を実行する基本的な方法を紹介しました。実際のプロジェクトに応じて、これらの手法を組み合わせたり、カスタマイズしたりすることで、より高度なインタラクションを実現することができます。

皆さんもぜひ、この知識を活用して、使いやすく、反応の良いウェブページを作成してみてください！