focusin(fn)


version 1.4 以降

解説

指定したイベントハンドラを、focusin イベントにバインドします。 bind("focusin", handler) のショートカットです。

focusin イベントは、マウスなどのポインティングデバイス操作やタブキーを押すなどの操作で、要素がフォーカスを得た時に発生します。

focus(fn) とは違い、バブリングしたイベントも捕捉することができます。

戻り値

  • jQuery: jQueryオブジェクト

関連


例1:親要素 parent1 は focus / blur イベントにバインドしています。バブリングを捕捉できないため、バインドしたイベントハンドラは実行されません。

親要素 parent2 は focusin / focusout イベントにバインドしています。バブリングを捕捉できるため、バインドしたイベントハンドラが実行され、親要素の背景色が変わります。

// 親要素 parent1 に、focus / blur イベントをバインド
// focus イベントで背景を緑に、blur イベントで背景を元に戻す。
// イベントバブリングを捕捉できないので、実際には背景色は変わりません。
$("#parent1")
    .focus(function(){ $(this).css("background-color", "#f0fff0"); })
    .blur(function(){ $(this).css("background-color", "transparent"); });


// 親要素 parent2 に、focusin / focusout イベントをバインド
// focusin イベントで背景を緑に、focusout イベントで背景を元に戻す。
// イベントバブリングを捕捉できるので、背景色が変わります。
$("#parent2")
    .focusin(function(){ $(this).css("background-color", "#f0fff0"); })
    .focusout(function(){ $(this).css("background-color", "transparent"); });

[parent1] focus / blur イベントをバインド


[parent2] focusin / focusout イベントをバインド