備忘録的プログラミングリファレンス

focusin ( onfocusin )イベント

 focusin ( onfocusin )イベントは、エレメントがフォーカスされると発生する FocusEvent インターフェイスのイベントです。 例えば form に設定すれば、入力待ちになっている input エレメントなどのデータ入力用エレメントを取得することができます。

focusin ( onfocusin )イベント
document.getElementsByTagName("form")[0].addEventListener("focusin", (event)=>{
	console.log( event.target );
});

詳しくは Example を参照してください

 onfocusin イベントは Bubbles 機能が働きますので、エレメントがフォーカスされたことを <form> エレメントといった親エレメントで捉えることができます。focus イベント は Bubbles 機能がないので、エレメントのフォーカスされたか/否かは onfocusin イベントを使います。

 onfocusin イベントは、onfocusout イベントの対です。

 FireFox は onfocusin イベントを ver.52 からサポートしています。古いバージョンでは動きません。常に新しいバージョンを利用することを促す必要があるでしょう。

ページ内 Index

- ad -

構文(Syntax)

in HTML

<tagelement onfocusin="function()">

in JavaScript

object.onfocusin = function(){ };

object.addEventListener("focusin", script_);

備考(Remarks)

BubblesYes
CancelableNo
InterfaceFocusEvent
Supported HTML ElementsALL HTML elements

Example

 inputエレメントがフォーカスされると背景色が明るくなります。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

- ad -