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

blur ( onblur )イベント

 blur ( onblur )イベントは、設定されたHTMLエレメントからフォーカスを失ったら発生するFocusEventインターフェイスのイベントです。

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

blur イベントを追加( onblur イベントハンドラーとして追加)
document.getElementsByTagName('form')[0].addEventListener("blur", (event)=>{
console.log( 'event type : ' + event.type );
});
詳しくは Example を参照してください

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

 最初にフォーカスを当てておくには、タグエレメントのautofocus 属性を使います。

 blur ( onblur )イベントは GlobalEventHandlers ミックスインに含まれます。

Syntax

in HTML

<tagelement onblur="function()">

in JavaScript

object.onblur = function(){ };
object.addEventListener("blur", script_);

備考(Remarks)

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

Example

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

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

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

<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、各エレメントがフォーカスされたら