HTML の onblur 属性

onblur とは、要素が入力フォーカスを失ったときに実行される JavaScript を指定する HTML 属性である。入力された値をスクリプトで検証するような場合に利用できる。

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>

Last name: First name:

イベント:

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 インタフェースを実装している。

Event
- UIEvent
  - FocusEvent

jQuery

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

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

参考文献

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

World Wide Web Consortium (2021) UI Events