jQueryのblur()はフォーカスが外れたらイベントを発動させ、メールフォームのバリデーションなどに使えますね。
逆にフォーカスされた際に発動させたり、動的に追加したフォームにblur()を効かせる方法なども併せてご紹介します。
目次
blur()の使い方
フォーカスが外れたら背景色を変える
まずはblur()を使って、テキストボックスからフォーカスが外れたら色を変えてみましょう。
HTML & CSS
|
1 2 3 4 5 6 7 |
<style> /*テキストボックスの背景に色を付ける*/ input { background: #ffc9f1; } </style> <input type="text" name="text_box"> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { //テキストボックスのフォーカスが外れたら発動 $('input[type="text"]').blur(function() { //背景色を白にする $(this).css('background', '#fff'); }); }); |
結果（動作サンプル）
下記テキストボックスをクリックしたあとに、別の所をクリックしてフォーカスが外れると背景色が白に変わるかと思います。
フォーカスが外れた瞬間に背景色が変わりました。
$(this)やcss()の使い方は以下で解説しています。
参考：jQueryの$(this)の使い方
参考：jQueryでcssを追加、削除
基本構文
$( セレクタ ).blur(function() {
〜フォーカスが外れたときの処理〜
});
セレクタに続けてblur()を指定し、引数のfunction()にフォーカスが外れたときの処理を記述します。
フォームをバリデートする
バリデートとは？
フォームを検証し、入力ミスや入力漏れ等をチェックすることです。
テキストボックスが空欄だったら入力を促す警告文を表示します。
HTML
|
1 2 3 4 |
<input type="text" name="text_box"> <!--テキスト出力用要素--> <p></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { //テキストボックスのフォーカスが外れたら発動 $('input[type="text"]').blur(function() { //もしテキストボックスが空だったら if ($(this).val() == '') { //隣の要素に警告文を表示する $(this).next().text('入力してください！'); //テキストボックスに文字が入力されたら } else { //隣の要素の警告文を消す $(this).next().text(''); }); }); |
結果（動作サンプル）
下記テキストボックスが空の状態でフォーカスを外すと、その下に警告文が表示されるかと思います。
テキストを入力すると、警告文は消えます。
focus()とblur()を組み合わせて使う
フォーカスが外れたときだけでなく、フォーカスされたときにもイベントを加えてみましょう。
HTML
|
1 |
<input type="text" name="text_box"> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { //テキストボックスがフォーカスされたら発動 $('input[type="text"]').focus(function() { //背景色を変える $(this).css('background', '#ffc9f1'); //テキストボックスのフォーカスが外れたら発動 }).blur(function() { //背景色を戻す $(this).css('background', '#fff'); }); }); |
結果（動作サンプル）
テキストボックスをクリックしてフォーカスすると背景色が変わり、フォーカスを外すと背景色が戻るかと思います。
フォーカスを当てると色が変わるフォームは分かりやすいですね。
動的に追加した要素でblur()
上記のように最初から存在する要素では問題なく動作しますが、jQueryで追加した動的な要素は上記サンプルのようなblur()では動作しません。
以下サンプルでご確認ください。
動作しない普通のblur()
動的に追加した要素で、上記サンプルでご紹介したようなblur()を使っても以下のように何も起きません。
HTML & CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> /*テキストボックスの背景に色を付ける*/ input { background: #ffc9f1; } </style> <!--テキストボックス追加用エリア--> <div> </div> <button>追加する</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { //ボタンをクリックしたら発動 $('button').click(function() { //div要素にテキストボックスを追加 $('div').append('<input type="text" name="text_box">'); }); //上で生成した要素に普通のblur()を発動 $('input[type="text"]').blur(function() { //背景色を変える $(this).css('background', '#fff'); }); }); |
結果（動作サンプル）
以下のボタンをクリックすると新しい要素が出てくるので、それでフォーカスを外してみてください。
何も変わらないはずです。
フォーカスを外しても何も反応しませんが、DOM読み込み時にはまだ存在していなかった要素なので、動作しないんですね。
以下のようにon()を使えば動的に追加した要素でも動作します。
動作するon()を使ったblur()
今度は動的に追加した要素でon()を使ったので動作します。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { //ボタンをクリックしたら発動 $('button').click(function() { //div要素にテキストボックスを追加 $('div').append('<input type="text" name="text_box">'); }); //上で生成した要素をon()を使って発動 $('div').on('blur', 'input[type="text"]', function() { //背景色を変える $(this).css('background', '#fff'); }); }); |
結果（動作サンプル）
以下のボタンをクリックすると新しい要素が出てくるので、それでフォーカスを外してみてください。
今度は背景色が変わるはずです。
色は変わりましたか？
どう違うのか見てみましょう。
両者の違い
//動的に生成したボタンで普通のblur()を発動
$(‘input[type=”text”]’).blur(function() {
//動的に生成した要素をon()を使って発動
$(‘div’).on(‘blur’, ‘input[type=”text”]’, function() {
on()を使って発動した方は、イベント名のblurとテキストボックスのinput[type="text"]がon()の引数に指定されていて、セレクタは静的な親要素を指定しています。
on()で設定するセレクタは静的な祖先要素であれば動作するので、documentじゃなく直近の親要素を指定するとパフォーマンスも若干良くなるでしょう
動的に追加したクリックイベントではon()を使いましょう。
