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

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

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

構文

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

機能

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

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

解説

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

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

$(function () {
	$("input").focusin(inFunc);
});

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

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

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

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

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

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

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

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

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

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

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

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

関連項目

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

メモ

focusメソッドとの違い

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

focusイベントのサンプル(子孫要素に反応しない):(focus/test02.html
focusinイベントのサンプル(子孫要素にも反応する):(focusin/test02.html

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

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

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

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

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

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

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

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

複数の要素をまとめて管理

子孫要素に反応しないfocusイベントはv1.0から存在したのに対し、forcusinはv1.4から追加された新しいメソッドです。つまりforcusinメソッドならではのメリットがあるはずです(でなければ追加する必要ないわけですから)。

サンプル(focusin/test03.html)を開き、body内のform要素内にinput要素が3つあることを確認してください。input要素にはそれぞれid属性が設定されています。

<span></span>
<form>
	<input id="name" type="text" />
	<input id="tel" type="text" />
	<input id="mail" type="text" />
</form>

続いてjQueryが以下の様に記述されているのを確認してください。ポイントはinput要素ではなくform要素に対してfocusinメソッドを利用している事です。子孫要素にも反応するのでform要素内にある3つのinput要素がフォーカスされても処理が実行されます。

$("form").focusin(function(eo) {
	$("span").text(eo.target.id);
})

これで3つのinput要素のフォーカス時の処理をまとめて設定できるわけですが、どのinput要素でイベントが発生したか分からないと困るので、イベントオブジェクトのtargetを利用してイベントが発生した要素を取得しています。サンプルではイベントが発生した要素のidを取得してtextメソッドでspan要素に表示しています。

結果として、テキストボックスにフォーカスすると、フォーカスしたテキストボックスのidがspan要素に表示されます。v1.4で追加されたfoucusinメソッドのメリットはこのように、複数の要素の処理をまとめて設定できる点にあるのではないかと私は思います。