MENU
  1. ホーム
  2. JavaScript
  3. Javascript応用
  4. 【Javascript応用】フォーカスイベント (focus, blur)とは？

【Javascript応用】フォーカスイベント (focus, blur)とは？

Javascript応用

JavaScriptにおけるフォーカスイベントは、ユーザーがウェブページ上の要素に注目するときに発生します。この記事では、focusとblurイベントの基本的な概念から、それらを実際のコーディングにどのように活用するかまでを解説します。

フォーカスイベントは、ウェブ開発において重要な役割を果たします。ユーザーがフォームの入力フィールドやボタンなどの要素にマウスを置くと、それらの要素がフォーカスを受け取り、それに応じて特定のアクションがトリガーされます。JavaScriptにおけるフォーカスイベントは、このようなユーザーの操作に反応し、動的なコンテンツやユーザーインタラクションを実現する上で欠かせないものです。

目次

フォーカス（focus）イベントとは

focusイベントは、要素がフォーカスを受け取ったときに発生します。例えば、ユーザーがテキストボックスにカーソルを合わせると、そのテキストボックスがフォーカスを受け取り、focusイベントがトリガーされます。このイベントを利用することで、特定の要素がフォーカスを受け取った際に行いたい処理を定義することができます。

const inputField = document.getElementById('myInput');

inputField.addEventListener('focus', function() {
    // テキストボックスがフォーカスを受け取った時の処理
    console.log('Input field is focused!');
});

blurイベントとは

blurイベントは、要素がフォーカスを失ったときに発生します。例えば、ユーザーがテキストボックスからカーソルを外すと、そのテキストボックスがフォーカスを失い、blurイベントがトリガーされます。blurイベントは、フォーカスが外れた際に行いたい処理を定義するのに利用されます。

const inputField = document.getElementById('myInput');

inputField.addEventListener('blur', function() {
    // テキストボックスがフォーカスを失った時の処理
    console.log('Input field lost focus!');
});

実践例

フォーカスイベントを使用して、フォームのバリデーションやユーザーインタラクションを改善することができます。例えば、ユーザーがパスワード入力フィールドにフォーカスを当てると、パスワードの強度を表示するなどの機能を実装することができます。

const passwordField = document.getElementById('password');

passwordField.addEventListener('focus', function() {
    // パスワードの強度を表示する処理
    showPasswordStrength();
});

passwordField.addEventListener('blur', function() {
    // パスワードの強度表示を非表示にする処理
    hidePasswordStrength();
});

まとめ

JavaScriptのフォーカスイベント (focusとblur)は、ユーザーが要素に注目する行為に応じて特定のアクションを実行するための重要なツールです。これらのイベントを活用することで、ウェブページのインタラクティブ性やユーザーエクスペリエンスを向上させることができます。

Javascript応用
目次