フォーカスイン【focusin】

フォーカスインとは？

コンピュータの操作画面で、ある特定の入力要素などが選択状態になること。入力対象として有効となり、それまで選択されていた他の要素は選択状態から外される。

入力フォームなど複数の入力要素からなる操作画面では、キーボードなどからの入力をどの要素に与えるか確定しなければならないため、事前の操作によって一つの要素を選択済みの状態にする。これを「フォーカス」（focus：焦点）という。

例えば、テキスト入力欄をクリックまたはタップすると、その欄がフォーカスを得た状態となり、文字入力を受け付けるようになる。このように、要素が入力対象として選択されることをフォーカスインという。一方、利用者が画面上で他の要素を選択すると、フォーカスがそちらに移り、元の要素からフォーカスが外れる。要素が入力対象から外れることは「フォーカスアウト」（focusout）という。

JavaScriptのフォーカスインイベント

Webページ上で動作するJavaScript プログラムでは、フォーカスインは主にfocusイベントとして実装される。プログラム上でこのイベントの発火時に実行する処理を指定しておくことで、利用者が入力のために項目を指定したタイミングに合わせて処理を実行できる。

このイベントの利用例としては、テキスト入力欄に案内用に事前に表示させておいた「ここに氏名を漢字で入力してください」といったプレースホルダー文字列を消去して空白に戻したり、入力を補助するためのツールチップやヒントを表示したり、入力欄の背景色や枠線を変化させて選択済みであることを視覚的に強調するといった処理が挙げられる。

focusイベントと類似する別のイベントにfocusinイベントがある。両者はほぼ同じタイミングで発火するが、技術的な違いが一つある。focusは親要素へのイベントの伝播（バブリング）が発生せず、その要素で完結するのに対し、focusinは捕捉されるまで上位要素へ順次バブリングしていく。複数の子要素をまとめて監視したり、共通の処理を実施したい場合などにはfocusinイベントが便利である。