• 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で偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。
サムネイル

JSで特定の位置までスクロールされたら要素を固定する方法【s……

2024年04月12日
CSSのstickyのような動きをJSで実装する JavaScriptを使って、「ある要素がページ上部に当たるまでスクロールされたら、その位置でその要素を固定表 […]
サムネイル

JSで日付を表示するならtoLocaleDateString……

2024年03月15日
toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます
サムネイル

JSで自動かな入力補完を実装できるライブラリ【jquery.……

2024年03月15日
jquery.autokana.jsは入力された日本語テキストのふりがな(フリガナ)を自動的に別の欄に入力してくれるJQueryのライブラリです。
サムネイル

JSでページ離脱時にメッセージを出す方法【beforeunl……

2024年03月15日
JavaScriptのイベントであるbeforeunloadを使えばページを離脱する前にメッセージを出して注意を促すことができます。
サムネイル

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

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