focus ( onfocus )イベント
focus ( onfocus )イベントは、設定された HTML エレメントがフォーカスされたら発生する FocusEvent インターフェイスのイベントです。
対のイベントは blur イベントです。フォーカスが外れると発生するイベントです。
フォーカスとは、<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 イベントが発生します。
イベントの詳細は開発用コンソールに表示されます。
- ad -
<form> に関連するイベント
以下は、<form> に関するイベントです。
イベント | 概要 |
---|---|
beforeinput () | 入力が起きたら |
change ( onchange ) | <FORM>部品において、入力値が変化してフォーカスが移るとき |
formdata ( onformdata ) | <form> を送信したとき |
input ( oninput ) | <FORM>部品において入力値が変化したら |
invalid ( oninvalid ) | <input>エレメントの送信時に無効な値がある場合に |
reset ( onreset ) | <FORM>部品においてリセットされたら |
submit ( onsubmit ) | <FORM>においてフォームが送信されたら |
blur ( onblur ) | ポップアップなどによってWindow、Document、各エレメントがフォーカスを失ったら |
focus ( onfocus ) | Window、Document、各エレメントがフォーカスされたら |