jQueryのblur()でフォーカスが外れたら発動

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryのblur()はフォーカスが外れたらイベントを発動させ、メールフォームのバリデーションなどに使えますね。

逆にフォーカスされた際に発動させたり、動的に追加したフォームにblur()を効かせる方法なども併せてご紹介します。

 

blur()の使い方

フォーカスが外れたら背景色を変える

まずはblur()を使って、テキストボックスからフォーカスが外れたら色を変えてみましょう。

HTML & CSS

jQuery

結果(動作サンプル)

下記テキストボックスをクリックしたあとに、別の所をクリックしてフォーカスが外れると背景色が白に変わるかと思います。

フォーカスが外れた瞬間に背景色が変わりました。

$(this)css()の使い方は以下で解説しています。

参考:jQueryの$(this)の使い方
参考:jQueryでcssを追加、削除

基本構文

$( セレクタ ).blur(function() {
  〜フォーカスが外れたときの処理〜
});

セレクタに続けてblur()を指定し、引数のfunction()にフォーカスが外れたときの処理を記述します。

フォームをバリデートする

バリデートとは?

フォームを検証し、入力ミスや入力漏れ等をチェックすることです。

テキストボックスが空欄だったら入力を促す警告文を表示します。

HTML

jQuery

結果(動作サンプル)

下記テキストボックスが空の状態でフォーカスを外すと、その下に警告文が表示されるかと思います。


 

テキストを入力すると、警告文は消えます。

参考:jQueryでのif文の書き方

focus()とblur()を組み合わせて使う

フォーカスが外れたときだけでなく、フォーカスされたときにもイベントを加えてみましょう。

HTML

jQuery

結果(動作サンプル)

テキストボックスをクリックしてフォーカスすると背景色が変わり、フォーカスを外すと背景色が戻るかと思います。

フォーカスを当てると色が変わるフォームは分かりやすいですね。

動的に追加した要素でblur()

上記のように最初から存在する要素では問題なく動作しますが、jQueryで追加した動的な要素は上記サンプルのようなblur()では動作しません。

以下サンプルでご確認ください。

動作しない普通のblur()

動的に追加した要素で、上記サンプルでご紹介したようなblur()を使っても以下のように何も起きません。

HTML & CSS

jQuery

結果(動作サンプル)

以下のボタンをクリックすると新しい要素が出てくるので、それでフォーカスを外してみてください。

何も変わらないはずです。

 

フォーカスを外しても何も反応しませんが、DOM読み込み時にはまだ存在していなかった要素なので、動作しないんですね。

以下のようにon()を使えば動的に追加した要素でも動作します。

動作するon()を使ったblur()

今度は動的に追加した要素でon()を使ったので動作します。

jQuery

結果(動作サンプル)

以下のボタンをクリックすると新しい要素が出てくるので、それでフォーカスを外してみてください。

今度は背景色が変わるはずです。

 

色は変わりましたか?

どう違うのか見てみましょう。

両者の違い

//動的に生成したボタンで普通のblur()を発動
$(‘input[type=”text”]’).blur(function() {
//動的に生成した要素をon()を使って発動
$(‘div’).on(‘blur’, ‘input[type=”text”]’, function() {

on()を使って発動した方は、イベント名のblurとテキストボックスのinput[type="text"]on()の引数に指定されていて、セレクタは静的な親要素を指定しています。

on()で設定するセレクタは静的な祖先要素であれば動作するので、documentじゃなく直近の親要素を指定するとパフォーマンスも若干良くなるでしょう

動的に追加したクリックイベントではon()を使いましょう。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*