jQueryのblurでフォーカスが外れた時の処理を行う方法【入力チェックなど】

投稿日:2023年05月01日（最終更新日:2023年05月31日）

blurメソッドとは？

jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。

入力チェックなどに利用されることが多いメソッドで、未入力であったり、指定外の文字を含んでいた時にメッセージを表示させるといった処理を行うことが可能になります。

フォーカスとは入力ボックスなどがクリックされて入力できる状態になっていることを指します。その後、別の場所をクリックしたり、他の入力ボックスにカーソルを移すことをフォーカスが外れると言います。

フォーカスされたときの処理は「focus()メソッド」を使って記述します。

なお、フォーカスされた時にスタイルを変更させたいだけであればCSSの疑似クラス「:focus」で簡単に行えます。(フォーカスされている時だけのスタイルなので、blurメソッドで外れた時の処理を書く必要はありません。)

CSSの疑似クラス「:focus」について詳しくはこちらのページをご覧ください。

CSSの疑似クラス「:focus」の使い方【focus-withinとの違い】

CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。同じく疑似クラスの「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になり、スタイルが適用されます。...【もっと読む】

blurの使い方

blurメソッドは次のように記述して使用します。

入力チェックなどを行いたいときは、条件分岐などを用いて処理を記述していきます。

下の例ではテキストボックスからフォーカスが外れた時にチェックを行い、入力されていなかったらメッセージを表示するようにしています。

HTML

<input type="text" id="testA" placeholder="ここに入力してください">

CSS

span.notice{
    font-size:12px;
    color:#d40000;
    margin-left:5px;
}

jQuery

$("#testA").blur(function(){
    if($(this).val() == ""){
        $(this).after("<span class='notice'>※入力されていません!</span>");
    }
});

プレビュー

focusメソッドと組み合わせて使う

先程の例では、テキストボックスが空の状態でフォーカスが外される度にメッセージが追加され続けてしまいます。

そこで、フォーカスされた時の処理を行う「focusメソッド」を使って、フォーカスされたらメッセージを削除して、メッセージが増え続けないようにします。

jQuery

$("#testA").blur(function(){
    if($(this).val() == ""){
        $(this).after("<span class='notice'>※入力されていません!</span>");
    }
});
/*追記↓*/
$("#testA").focus(function(){
    $(this).next(".notice").remove();
});

プレビュー

まとめ

以上がjQueryのblur()でフォーカスが外れた時の処理を行う方法です。

入力チェックなどをリアルタイムで行うことができるので問い合わせフォームなどのユーザビリティの向上が期待できるのではないでしょうか？