HTML の onchange 属性

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>

参考文献

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

World Wide Web Consortium (2021) UI Events