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

JavaScriptのonblurイベントとは？使い方と実装例をわかりやすく解説

JavaScriptのonblurイベントは、要素がフォーカスを失ったタイミングで発生するイベントです。例えば、テキスト入力欄からカーソル（フォーカス）が外れた瞬間に、特定の処理を実行したい場合などに活用されます。

onblurイベントが発生する場面

onblurイベントは、主に以下のようなケースで発生します。

  • ユーザーが入力フィールドから別の場所をクリックしたとき
  • Tabキーなどでフォーカスが次の要素へ移動したとき
  • ウィンドウやフレームがアクティブでなくなったとき

フォームの入力チェックやバリデーション処理では特によく使われるイベントなので、覚えておくと便利です。

onblurイベントの実装例

次のコードでは、テキストボックスからフォーカスが外れると、その背景色が緑色に変わるようにonblurイベントを設定しています。実際にブラウザで動作を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <p>下の入力欄に入力してください：</p>
      <input type = "text" onblur = "newFunc(this)">
      <script>
         function newFunc(a) {
            a.style.background = "green";
         }
      </script>
   </body>
</html>

コードの解説

<input>タグにonblur = "newFunc(this)"という属性を指定しています。thisは、イベントが発生した要素自身（この場合はinput要素）を指します。

関数newFunc()内では、受け取った要素のstyle.backgroundプロパティに「green」を設定しています。その結果、入力欄からフォーカスが外れた瞬間に背景色が緑色に変化します。

onblurイベントの活用シーン

onblurイベントは、単なる装飾以外にも実用的な用途が多くあります。

  • 入力値のバリデーション： フォーカスが外れた時点でメールアドレスや電話番号の形式をチェックし、不正な値ならエラーメッセージを表示する。
  • 自動保存機能： 入力完了後にフォーカスが外れたタイミングでデータを保存する。
  • 表示内容の整形： 金額や日付の入力後に、自動的にフォーマットを揃える。

このようにonblurイベントを活用することで、ユーザーの入力体験を向上させるインタラクティブなWebページを作成できます。

  1. JavaScriptにおけるscreenYマウスイベントの役割とは？

    JavaScriptにおいて、screenYマウスイベントプロパティは、イベントが発生した際のマウスポインタの垂直方向（Y軸）の座標を返します。 この値は、画面（モニター）の左上を原点とした絶対的な座標として取得されるため、ブラウザウィンドウの位置に関係なく、画面全体の中でのポインタ位置を知ることができます。なお、水平方向の座標を取得したい場合は、同じく用意されている screenX プロパティを使用します。 screenYの主な特徴 マウスポインタの垂直座標（Y座標）をピクセル単位で返す 画面の左上を基準点（0, 0）とする clientY とは異なり、ブラウザの表示領域ではなく画面全体が

  2. JavaScriptのevery()メソッドとは？使い方とサンプルコードをわかりやすく解説

    JavaScriptの配列（Array）メソッドである every() は、配列内のすべての要素が、指定した関数によるテスト条件を満たしているかどうかを判定するメソッドです。 判定結果はブール値（真偽値）として返されます。 すべての要素が条件を満たす場合 → true 1つでも条件を満たさない要素がある場合 → false every()メソッドのパラメータ every()メソッドでは、以下の2つの引数を使用できます。 callback − 各要素に対して実行されるテスト用の関数です。この関数が false を返すと、その時点で処理が中断され、every()全体が false を返します