HTML onchange attribute

HTML タグの onchange 属性は、テキストが(部分的にでも)選択されたときに実行するスクリプトを指定する属性です。onchange 属性は省略可能です。

HTML

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

<tag onchange="javascript">

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

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

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

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

サンプル

HTMLタグのonchange属性にchangeイベントのハンドラを設定する例を次に示す。

<input type="text" onchange="alert('It has been changed.')">
<fieldset>
  <legend>口座種別</legend>
  <input type="radio" name="accounts" value="s" id="savings" onchange="alert('It has been changed.')" checked>
  <label for="savings">普通預金</label>
  <input type="radio" name="accounts" value="c" id="checking" onchange="alert('It has been changed.')">
  <label for="checking">当座預金</label>
</fieldset>
口座種別
<label for="color">Color:</label>
<input type="color" id="color">
<p id="color-value"></p>

Color:

<select onchange="alert('It has been changed.')">
  <option>first</option>
  <option>second</option>
  <option>third</option>
</select>
<textarea onchange="alert('It has been changed.')">
</textarea>

要素

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

JavaScript

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

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

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

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

jQuery

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

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

関連記事

class

dir

id

lang

onblur

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