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

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

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

構文

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

機能

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

blurメソッドと異なり子孫要素からフォーカスが外れた時にもfunctionが実行されます(ページ下部のメモを参照)。

解説

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

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

$(function () {
	$("input").focusout(outFunc);
});

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

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

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

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

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

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

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

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

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

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

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

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

関連項目

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

メモ

blurメソッドとの違い

blurメソッドはfocusoutメソッドと同じようにフォーカスが外れたときの処理を設定します。異なる点は子孫要素に反応するか否かです。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を確認します。ほとんどfocusout/01.htmlと同じなのですが利用しているメソッドが異なります(blurとfocusout)。そしてポイントなのは、2つのファイルともセレクタがform要素になっている点です。

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

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

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

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

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