blur ( onblur )イベント
blur ( onblur )イベントは、設定されたHTMLエレメントからフォーカスを失ったら発生するFocusEvent インターフェイスのイベントです。
対のイベントは focus イベントです。フォーカスされると発生するイベントです。
document.getElementsByTagName('form')[0].addEventListener("blur", (event)=>{
console.log( 'event type : ' + event.type );
});
詳しくは Example を参照してください
フォーカスとは、<FORM> の入力部品、input、textarea などにおいては入力状態になっていることです。フォーカスを失ったというのは、入力状態ではなくなったということです。
フォーカスはタグエレメントにも移動します。その場合は強調表示されます。
最初にフォーカスを当てておくには、タグエレメントのautofocus 属性を使います。
blur ( onblur )イベントは GlobalEventHandlers ミックスインに含まれます。
ページ内 Index
- ad -
Syntax
in HTML
<tagelement onblur="function()">
in JavaScript
object.onblur = function(){ };
object.addEventListener("blur", script_);
備考（Remarks）
| Bubbles | No |
| Cancelable | No |
| Interface | FocusEvent |
| Supported HTML Elements | ALL HTML elements |
| Sync / Async | Sync |
| Composed | Yes |
Example
blur ( onblur )イベントの例です。「確認」ボタンをクリックすると Example を実行します。
以下の例では、表示されると Name 入力に自動でフォーカスをします。別の場所をフォーカスしてみてください。blur イベントが発生します。
イベントの詳細は開発用コンソールに表示されます。
- 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、各エレメントがフォーカスされたら |