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

focus ( onfocus )イベント

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

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

focus イベントを追加( onfocus イベントハンドラーとして追加)
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 イベントを使います。

フォーカスについて

フォーカスの順序

 フォーカスの順序を変更したり無効化するには、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)

BubblesNo
CancelableNo
InterfaceFocusEvent
Supported HTML ElementsALL HTML elements
Sync / AsyncSync
ComposedYes

Example

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

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

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