* onchange 属性 (HTML, XHTML 1)

[1] [[HTML]] の [CODE(HTMLe)[[[input]]]] 要素、
[CODE(HTMLe)[[[select]]]] 要素、 [CODE(HTMLe)[[[textarea]]]] 要素の
[DFN[[CODE(HTMLa)[onchange]] 属性]]は、
[[制御子]]が入力[[焦点]]を失った時で、
しかも値が変更されていた時に発生する[[事象]]に関する[[内在事象]]属性です。

[2] 仕様書:
- [[HTML 4]]
-- [CODE(HTMLa)[onchange]] 属性
<IW:HTML4:"interact/scripts.html#adef-onchange">

[10]
HTML 4 DTD の[[注釈]] (参考) には
[Q[the element value was changed]]
と説明があります。

** 代替

[3] 内在事象属性は[[表現と構造の分離]]の原則に反するので、
好ましくないと考える人もいます。また、 [[DOM 0]]
に基づく古い設計です。

代わりに、 [CODE(HTMLe)[[[script]]]] 要素などにより関連付けたスクリプト内で
[[DOM 2]] 以上の[[事象]]に関するメソッド等が利用できます。
DOM 水準 2 や DOM 水準 3 はこの属性に対応する
DOM の事象 [CODE(DOM)[[VAR[ev:]][[change]]]] を用意しています。

** 属性値

[4] この属性の値は [CODE(SGML)[%[[Script]]]] です。 [[SGML]]
的には [CODE(SGML)[[[CDATA]]]] です。
自称が発生したときに実行するスクリプトの code
を記述します。[[スクリプト言語]]は、
[CODE(HTTP)[[[Content-Script-Type]]]] によります。

[5] この属性は省略可能です。

[[#comment]]


** 他との関係

[6] この属性に対応する DOM の事象は [CODE(DOM)[[VAR[ev:]][[change]]]]
です。そちらもあわせてごらんください。

[[#comment]]


** 例

[7] 値変更時に確認を行う例 (JavaScript) [SRC[HTML 4 18.2.3]]
[PRE(HTML)[
<INPUT NAME="num"
    onchange="if (!checkNum(this.value, 1, 10)) 
        {this.focus();this.select();} else {thanks()}"
    VALUE="0">
]PRE]

[8] 値変更時に有効・無効を切替る例 (VBScript) [SRC[HTML 4 18.2.3]]
[PRE(HTML)[
    <INPUT name="edit1" size="50">    
    <SCRIPT type="text/vbscript">
      Sub edit1_changed()
        If edit1.value = "abc" Then
          button1.enabled = True
        Else
          button1.enabled = False
        End If
      End Sub
    </SCRIPT>
]PRE]

HTML 4 仕様書に載っていた例ですが、 VBScript
では [[VB]] と同じ、手続き名による事象取扱器に関する例示を行いたかったのでしょうか。

値変更時に有効・無効を切替る例 (Tcl) [SRC[HTML 4 18.2.3]]
[PRE(HTML)[
    <INPUT name="edit1" size="50">
    <SCRIPT type="text/tcl">
      proc edit1_changed {} {
        if {[edit value] == abc} {
          button1 enable 1
        } else {
          button1 enable 0
        }
      }
      edit1 onChange edit1_changed
    </SCRIPT>
]PRE]

VBScript と同じことを Tcl で書いた例ですが、
Tcl では登録が必要なようです (JavaScript の
[CODE(JS)[edit1.onchange]] への代入に相当か)。

[[#comment]]


** メモ

[11]
[CITE[Bug 126379 - Select onChange not called using down arrow key]] 
<https://bugzilla.mozilla.org/show_bug.cgi?id=126379>

[CITE[Error in HTML 4.01 specification of 'onchange' event from Josh Purinton on 2003-05-09 (www-html-editor@w3.org from April to June 2003)]] 
<http://lists.w3.org/Archives/Public/www-html-editor/2003AprJun/0061.html>

[CITE[Re: Error in HTML 4.01 specification of 'onchange' event]]
<mid:20050803032957.99737.qmail@web50207.mail.yahoo.com>

[12] [CITE@en-GB-x-Hixie[Web Forms 2.0]] ([TIME[2009-01-05 20:07:15 +09:00]] 版) <http://www.whatwg.org/specs/web-forms/current-work/#the-change>

[13] [CITE@en[Web Applications 1.0 r8367     Revamp 'input' and 'change' event logic for <input> elements. The primary goal here is to make 'input' events fire on type=checkbox, type=radio, and type=file, but this also improves the way other things here are phrased.]]
( ([TIME[2013-12-19 09:03:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8366&to=8367>

[14] [CITE@en[Web Applications 1.0 r8720     Block popups from some weird edge cases that fire 'change' events on <select> as a result of script.]]
( ([TIME[2014-08-27 08:53:00 +09:00]] 版))
<http://html5.org/r/8720>

[15] [CITE@en[Web Applications 1.0 r8723     Fire 'change' when unselected a video track too.]]
( ([TIME[2014-08-29 03:49:00 +09:00]] 版))
<http://html5.org/r/8723>

[FIG(quote)[
[FIGCAPTION[
[9] [CITE[AngularJS - inputのchangeイベントが発火しない時の対処法 - Qiita]]
([TIME[2015-04-24 16:32:34 +09:00]] 版)
<http://qiita.com/morigamix/items/9965bf6c282d43f291ad>
]FIGCAPTION]

> input'''['''type="date"''']'''などに入力する際は専用のオートコンプリートが提供されますが、
> 端末によってchangeイベントが発火しない場合があります。(検証ではHTL21, SC-06Dで再現)

]FIG]