デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.blur( )フォーカス(子孫要素を含まない)が外れた時の処理を設定

構文

フォーカス(子孫要素を含まない)が外れた時の処理を設定返値:jQueryオブジェクト
jQo.blur( function )ver1.0〜
jQo.blur( )ver1.0〜
jQo.blur( object, function )ver1.4.3〜

機能

jQueryオブジェクトで指定した要素からフォーカスが外れたら引数のfunctionを実行します。引数にfunctionを設定しない場合は、指定した要素に設定(バインド)されたfunctionを実行します(これはfocusoutメソッドではできません)。

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。

focusoutメソッドと異なり子孫要素からフォーカスが外れてもfunctionが実行されません(ページ下部のメモを参照)。これはblurイベントがバブリングしない(イベントが親要素に伝わらない)ためです。

解説

フォーカスが外れた時に実行する処理を設定

サンプル(blur/01.html)を開いてbody内にtextタイプのinput要素が1つあることを確認してください。jQueryは以下の様に記述され、blurメソッドの引数にfunctionの「blurFunc」が設定されています。

$(function () {
	$("input").blur(blurFunc);
});

blurメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そしてフォーカスが外れたら実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

blurに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 フォーカスが外れたら実行したい処理
}

サンプルblur/01.htmlで利用したblurFuncは以下の様になっており、cssメソッドを利用して背景色を薄黄色に変更しています。このサンプルでは引数(イベントオブジェクト)は利用していません。

function blurFunc(eo) {
	$("input").css("background-color","#ffc");
};

結果として、一度input要素をフォーカスしてからフォーカスを外すと背景色が薄黄色になります。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(blur/01b.html

$("input").blur(function (eo) {
	$("input").css("background-color","#ffc");
});

サンプルblur/01.htmlやサンプルblur/01b.htmlはフォーカスが外れたときの処理しか書いていませんが、参考としてフォーカスされたときに背景色を薄黄色にして、フォーカスが外れたときに背景色を白に戻すサンプルをページ下部の「メモ」で紹介しています。

他の要素に設定されたフォーカスが外れた時の処理を実行する

blurメソッドは引数を設定しないと、要素に設定されたフォーカスが外れた時の処理を実行します。
サンプル(blur/02.html)を開いてbody内にbutton要素が追加されたことを確認してください。

続いてjQueryを確認してください。input要素に設定されたフォーカスが外れた時の処理はblur/01b.htmlと同じですが、以下の処理が追加されています。この処理によってbuttonをクリックするとinput要素に設定されたフォーカスが外れた時の処理が実行されます。

$("button").click(function(){
	$("input").blur();
})

結果として、buttonを「クリック」するとinput要素から「フォーカスを外した」のと同じようにinput要素の背景色が薄黄色になります。

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル(blur/03.html)を開いてbody内の構成はblur/01b.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、blurメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。この値をvalメソッドを利用してinput要素に表示します。

$("input").blur({test:10}, function (eo) {
	$("input").val(eo.data.test);
});

結果として、一度input要素をフォーカスしてからフォーカスを外すと、input要素の値として第1引数で渡されたtestプロパティの値「10」が表示されます。

関連項目

フォーカされた時の処理を設定したい場合はfocusメソッドを利用します。
似たようなメソッドにfocusoutメソッドがあります。このメソッドとの違いは以下の「メモ」で紹介しているので参考にしてください。

メモ

focusoutメソッドとの違い

focusoutメソッドはblurメソッドと同じようにフォーカスが外れたときの処理を設定します。異なる点は子孫要素に反応するか否かです。blurイベントはバブリングしない(親要素にイベントが伝わらない)ため子孫要素でイベントが発生してもfunctionは実行されません。これに対しfocusoutイベントはバブリングするため、子孫要素からのイベントを受け取りfunctionを実行することができます。これはmouseoverイベントとmouseenterイベントの関係と同じです。→参考:使い方「イベントフロー(3)」

blurメソッドのサンプル(子孫要素に反応しない):(blur/test02.html
focusoutメソッドのサンプル(子孫要素にも反応する):(focusout/test02.html

上記2つのサンプルともbody内の構成は以下の様に、form要素内にinput要素があります(つまりinput要素はform要素の子孫要素)。

<form>
	<input type="text" />
</form>

続いてjQueryを確認します。ほとんどblur/01.htmlと同じなのですが利用しているメソッドが異なります(blurとfocusout)。そしてポイントなのは、2つのファイルともセレクタがform要素になっている点です。

$(function () {
	$("form").blur(inFunc);
});

まずはblurメソッドのサンプル(blur/test02.html)で一度input要素をフォーカスしてからフォーカスを外してください。しかし背景色は薄黄色になりません。セレクタがform要素なのですから機能しないのは当たり前のように感じます。

しかしfocusoutメソッドのサンプル(focusout/test02.html)では、input要素からフォーカスが外れると背景色が薄黄色に変わります。これは(form要素の子孫要素である)input要素で発生したイベントを受け取るためです(イベントはバブリングして上がってくる)。
→参考:使い方「イベントフロー(1)」

フォーカスされた時の処理も設定

サンプルblur/01.htmlにfocusメソッドの処理を追加してフォーカスしたらinput要素の背景色を薄き色にして、フォーカスが外れたら背景色を白に戻すようにしました。→サンプル(focus/test01.html