onchange

onchange

onchange 属性 (HTML, XHTML 1)

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

[2] 仕様書:

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

代替

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

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

属性値

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

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

他との関係

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

[7] 値変更時に確認を行う例 (JavaScript) HTML 4 18.2.3

<INPUT NAME="num"
    onchange="if (!checkNum(this.value, 1, 10)) 
        {this.focus();this.select();} else {thanks()}"
    VALUE="0">

[8] 値変更時に有効・無効を切替る例 (VBScript) HTML 4 18.2.3

    <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>

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

値変更時に有効・無効を切替る例 (Tcl) HTML 4 18.2.3

    <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>

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

メモ

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

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>

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

[12] Web Forms 2.0 ( 版) <http://www.whatwg.org/specs/web-forms/current-work/#the-change>

[13] 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. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=8366&to=8367>

[14] Web Applications 1.0 r8720 Block popups from some weird edge cases that fire 'change' events on <select> as a result of script. ( ( 版)) <http://html5.org/r/8720>

[15] Web Applications 1.0 r8723 Fire 'change' when unselected a video track too. ( ( 版)) <http://html5.org/r/8723>

[9] AngularJS - inputのchangeイベントが発火しない時の対処法 - Qiita ( 版) <http://qiita.com/morigamix/items/9965bf6c282d43f291ad>

input[type="date"]などに入力する際は専用のオートコンプリートが提供されますが、

端末によってchangeイベントが発火しない場合があります。(検証ではHTL21, SC-06Dで再現)