jQueryのフォーカスインとフォーカスアウトイベント【現役エンジニアが解説】

PROGRAM

今回は、jQueryのフォーカスインとフォーカスアウトイベントについて、簡単に解説していきます。

フォーカスインイベント

jQueryでフォーカスインイベントを簡単に検知できます。

focusinメソッドで引数に指定した関数をフォーカスインイベント時に実行できます。

$('#hoge').focusin(function(){
  // 処理を書く
});

上記のコードでは、hogeというidを持つ要素のフォーカスインイベント時に処理を実行させます。

フォーカスアウトイベント

フォーカスアウトイベントの検知も容易です。

focusoutメソッドで引数に指定した関数をフォーカスアウトイベント時に実行可能です。

$('#hoge').focusout(function(){
  // 処理を書く
});

上記のコードの例では、hogeのidの要素のフォーカスアウトイベント時に処理を実行させます。

focusメソッドやblurメソッドでも関数を実行可能

他のメソッドでもイベントの検知ができます。

$('#hoge').focus(function(){
  // 処理を書く
});

上記のように、focusメソッドでもフォーカスが当たったことを検知できます。

$('#hoge').blur(function(){
  // 処理を書く
});

また、上記の例のように、blurメソッドでフォーカスが外れたことを検知することが可能です。