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

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

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

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

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

関連する記事

サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]
サムネイル

HTMLのチェックボックスに選択上限を設ける方法【Javas……

2023年10月01日
最終更新日:2023年09月28日
チェックボックスに選択上限を設けるには、JavaScriptを使ってチェックの数をカウントし設定した数を超えたらチェックできないようにします。
サムネイル

横スクロール可能なことを示すヒントを表示するJavascri……

2023年09月01日
Javascriptのライブラリ「ScrollHint(スクロールヒント)」を使えば、ユーザーに対して要素がスクロール可能であることをわかりやすく示すアイコンを表示することができます。
サムネイル

JavascriptでブラウザやOSを判定する方法【plat……

2023年09月01日
Javascriptのplatform.jsというライブラリを利用すれば、簡単にユーザーが使用しているブラウザやOS情報を取得し判別する処理を作ることが可能です。
サムネイル

Javascriptでフォーム送信時に確認ダイアログを出す方……

2023年09月01日
Javascriptでフォーム送信時にダイアログ表示させてユーザーに処理を続行して良いか確認するには「confirmメソッド」と「onsubmit属性」の2つを使用します。
サムネイル

Javascriptで文字のUnicode(UTF-16)を……

2023年09月01日
最終更新日:2023年08月29日
JavascriptのcharCodeAtを使うと、日本語(テキスト)のUnicode(UTF-16)を取得したり、Unicode(UTF-16)をテキストに変換することが可能です。