• HOME > 
  • Javascript > 
  • jQueryのblurでフォーカスが外れた時の処理を行う方法...

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

投稿日:

blurメソッドとは?

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

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

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

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

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

リンク先のサムネイル
CSSの疑似クラス「:focus」の使い方【focus-withinとの違い】

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

blurの使い方

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()でフォーカスが外れた時の処理を行う方法です。

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

関連する記事

サムネイル

jQueryのinArray()で配列内を検索する方法【要素……

2023年05月01日
最終更新日:2023年05月31日
jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。
サムネイル

JavascriptのindexOfで文字列を検索する方法【……

2023年05月01日
最終更新日:2023年05月31日
indexOfメソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。
サムネイル

jQueryのclosest()で最も近い親要素を取得する方……

2023年05月01日
最終更新日:2023年04月17日
jQueryのclosest()は、要素から最も近い親要素を取得(指定)できるメソッドです。要素の親要素を辿っていき、該当するセレクターを持つものを見つけ出してくれます。
サムネイル

jQueryのprop()メソッドで属性値を取得・設定する方……

2023年04月04日
prop()は要素の属性値を取得したり、追加・変更することができるメソッドです。attrメソッドとの違いには「返り値が異なる」といった点があります。
サムネイル

jQueryでラジオボタンの値を取得や操作する方法【チェック……

2023年04月04日
jQueryを使えばHTMLのラジオボタンでユーザーが選択した(チェックされた)値を取得・操作することができます。propメソッドを使用して行います。
サムネイル

jQueryでaタグのhref(リンク先)を書き換える方法【……

2023年04月04日
最終更新日:2023年05月31日
aタグのhref(リンク先のURL)を書き換えたい場合は、attrメソッドを使用します。リンク先のURLの一部だけを書き換えたい時は、replaceメソッドで文字の置き換えを実行してからattrメソッドで書き換えるという方法になります。