HTML onblur attribute

HTML タグの onblur 属性とは、blur イベントが発生したとき(要素が入力フォーカスを失ったとき)に実行する JavaScript を指定するイベント属性である。

HTML

HTMLで blur イベントのハンドラを指定する。

<tag onblur="javascript">

onblur 属性で関数を呼び出す場合、第1引数にイベントオブジェクトを渡すことができる。

<tag onblur="func(arguments[0])">

onblur 属性で関数を呼び出す場合、第2引数にエレメントオブジェクトを渡すことができる。

<tag onblur="func(arguments[0], this)">

サンプル

<label for="last_name">Last name:</label>
<input type="text" id="last_name" onblur="example(arguments[0], this)">
<label for="first_name">First name:</label>
<input type="text" id="first_name" onblur="example(arguments[0], this)">
<p><span id="msg"></span></p>
<script>
  function example(event, element) {
    document.getElementById('msg').innerHTML = element.id + 'がフォーカスを失いました。'
  }
</script>

イベント:

Tab キーを押してリンクにフォーカスを合わせて、さらに Tab キーを押してフォーカスを失うと、JavaScriptが実行される。

次の要素(タグ)に対してonblur属性を指定することができる。

同期/非同期

同期

バブリング

blur イベントはバブリング(下位の要素から上位の要素へ伝播)しない。

イベントのキャンセル

blur イベントはキャンセルできない。

デフォルトの動作

blur イベントにデフォルトの動作は無い。

要素

次に示すイベント・ハンドラ・コンテンツ属性は、任意のHTML要素に指定することができる。

省略可能

onblur 属性は省略可能である。

JavaScript

HTML の onblur 属性の代わりに、JavaScript から blur イベントのハンドラを設定することもできる。

<input type="text" id="example">
<script>
  document.getElementById('example').onblur = function(){
    /* do somthing */
  }
</script>

JavaScript からイベントリスナーを登録する方法もある。

<input type="text" id="example">
<script>
  document.getElementById('example').addEventListener('blur', function(){
    /* do somthing */
  )
</script>

イベントオブジェクト

blur のイベントオブジェクトは、FocusEvent インタフェースを実装している。

jQuery

HTML の onblur 属性の代わりに、jQuery から blur イベントのハンドラを設定することもできる。

<input type="text" id="example">
<script>
  $('#example').on('blur', function(event){
    /* do somthing */
  })
</script>

関連記事

class

dir

id

lang

onchange

onclick

oncontextmenu

ondblclick

onfocus

onkeydown

onkeypress

onkeyup

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

onselect

style

title

参考文献

Web Hypertext Application Technology Working Group (2022) "Web application APIs" HTML Living Standard

World Wide Web Consortium (2021) UI Events