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

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

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

構文

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

機能

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

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

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

解説

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

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

$(function () {
	$("input").focus(focusFunc);
});

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

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

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

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

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

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

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

指定した要素にフォーカスを与える

検索エンジンが今のようにgoogle1強で無かった時代。googleはページを開くとテキストボックスにフォーカスされており、すぐに文字を入力できる状態なのに感心しました(今ではyahooでもそうですが)。

これと同じことがfocusメソッドで可能です。focusメソッドは引数を設定しないと、jQueryオブジェクトで指定した要素にフォーカスを与えます。サンプル(focus/02.html)を開くと、すでにinput要素がフォーカスされていることを確認してください。

jQueryは以下のように引数を設定しないでfocusメソッドを利用しているだけです。こうすることでセレクタに指定したinput要素にフォーカスすることができるのです。これはfocusinメソッドには無い機能なので覚えるようにしましょう。

$("input").focus();

もしfocus/02.htmlのinput要素にfocusメソッドでfunctionが設定されていた場合は、その処理も実行されます。サンプル(focus/02b.html)を開いてbody内の構成がfocus/02.htmlと同じ事を確認してください。jQueryは以下の様にfocus/01b.htmlと同じようにinput要素にfocusメソッドが利用されています。

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

結果として、ページを開くとinput要素がフォーカスされ、input要素の背景色が薄黄色になります。

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

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

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

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

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

関連項目

フォーカスが外れた時の処理を設定したい場合はblurメソッドを利用します。

似たようなメソッドにfocusinメソッドがあります。このイベントとの違いは以下の「メモ」で紹介しているので参考にしてください。またfocusinメソッドのメモ「複数の要素をまとめて管理」ではfocusinメソッドの特長を活かしたコーディングを紹介しています。

メモ

focusinメソッドとの違い

focusinメソッドはfocusメソッドと同じように要素が選択(フォーカス)されたときの処理を設定します。異なる点は子孫要素に反応するか否かです。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を確認します。ほとんどfocus/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)」

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

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

アラートを利用したサンプルでトラブル

私はjavaScriptの動作確認にalertをよく利用するのですが、focus/02b.htmlのサンプルのinput要素の処理にalertを追加したら大変なことになりました。buttonをクリックするとinput要素の処理が実行され、アラートウインドウが表示されるのですが、OKボタンを押すと、再びアラートがでるというアラートのループに陥ったのです。

たぶんアラートウインドウが閉じられると、再びブラウザの状態が再確認され、focusイベントが再発生するのだと思います。念のため、必要以上にfocusイベントが発生していないかを確認するサンプルを作成しました。

サンプル(focus/test03.html)ではfocusイベントが発生したらappendメソッドを利用してp要素に「focus」と追加していきます。buttonをクリックしても、1回しか「focus」が追加されないため、余計なイベントが発生していないことが確認できます。

v1.9での仕様変更(バグ修正)

v1.9以前はフォームの要素でフォーカスが移動する際、本来であれば「以前フォーカスされていた要素のblur処理」が実行されてから「新しくフォーカスされた要素のfocus処理」を実行すべきですが、逆になっていました。サンプル(focus/test04.html)を開いてbody内にフォームpassword要素とtext要素があることを確認してください(左がパスワード、右がテキストボックス)。

jQueryには各要素のfocus/blurの状態をappendメソッドを利用してbody内に表示するようにしてありますが、ポイントは以下の部分です。テキストボックスがフォーカスされるとtriggerイベントを利用してパスワードをフォーカスするようにしています。

$("input[type='text']").focus(function(){
	$("body").append("textがfocus<br/>");
	$("input[type='password']").trigger("focus");
})

サンプルで実際に右側のテキストボックスをクリックしてフォーカスして下さい。表示されるテキストからパスワードをフォーカスしてからテキストボックスのブラー処理が実行されていることが確認できます。

続いてバグが修正されたv1.9のサンプルを確認します。サンプル(focus/test04b.html)を開いて利用しているjQueryのバージョン以外はfocus/test04.htmlと同じ事を確認してください。

<script type="text/javascript" src="../../../css_js/jquery-1.9.0.min.js"></script>

このサンプルで同じようにテキストボックスをフォーカスすると、きちんとテキストボックスのブラー処理の後でパスワードをフォーカスしていることが確認できます。