focus ( onfocus )イベント

　focus ( onfocus )イベントは、設定された HTML エレメントがフォーカスされたら発生する FocusEvent インターフェイスのイベントです。

　対のイベントは blur イベントです。フォーカスが外れると発生するイベントです。

focus イベント

document.getElementsByTagName('form')[0].addEventListener("focus", (event)=>{
	console.log( 'event type : ' + event.type );
});

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

　フォーカスとは、<FORM> の入力部品、input、textarea などにおいては入力状態になっていることです。
　フォーカスはタグエレメントにも移動します。その場合は強調表示されます。

　<input>、<select>、<a>に使用されるケースが多いです。
　focus イベントと同じような機能に focusin イベントがあります。違いは、focusイベントには bubble 機能がありません。 focusイベントを利用して bubble 機能を使うには、addEventListener()メソッドのオプションの useCapture パラメータを使用します。
　HTMLエレメントもしくはその子エレメントが focus を取得できるかを知るためには focusin イベントを使います。

- ad -

フォーカスについて

フォーカスの順序

　フォーカスの順序を変更したり無効化するには、HTML の tabindex 属性を利用します。

フォーカスを無効に

　CSS を利用してフォーカスを無効にするには、user-select プロパティを利用します。

CSS におけるフォーカス時の表示

　CSS においてもフォーカスによる表示変化を :focus クラスによって設定することができます。簡易に表示方法に変化をもたせたいときは、 :focus クラスといったスタイルシートを利用したほうが簡便です

任意にフォーカスをあてる

　任意にフォーカスをあてるには、Window.focus() メソッドを使います。ただし、最新のブラウザでは機能しないようなので注意してください。

構文（Syntax）

in HTML

<tagelement onfocus="function()">

in JavaScript

object.onfocus = function(){ };

object.addEventListener("focus", script_);

備考（Remarks）

Bubbles	No
Cancelable	No
Interface	FocusEvent
Supported HTML Elements	ALL HTML elements
Sync / Async	Sync
Composed	Yes

Example

　focus ( onfocus )イベントの例です。「確認」ボタンをクリックすると Example を実行します。

　以下の例では、表示されると Name 入力に自動でフォーカスをします。Age の入力欄をフォーカスしてみてください。focus イベントが発生します。
　イベントの詳細は開発用コンソールに表示されます。

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

HTML内容

CSS内容

Script内容