<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><section><h1>onchange 属性 (HTML, XHTML 1)</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="1" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[1]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">HTML</anchor> の <code class="HTMLe"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">input</anchor></code> 要素、
<code class="HTMLe"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">select</anchor></code> 要素、 <code class="HTMLe"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">textarea</anchor></code> 要素の
<dfn><code class="HTMLa">onchange</code> 属性</dfn>は、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">制御子</anchor>が入力<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">焦点</anchor>を失った時で、
しかも値が変更されていた時に発生する<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">事象</anchor>に関する<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">内在事象</anchor>属性です。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="2" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[2]</anchor-end> 仕様書:<ul><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">HTML 4</anchor><ul><li><code class="HTMLa">onchange</code> 属性
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="IW" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="HTML4:&quot;interact/scripts.html#adef-onchange&quot;">IW:HTML4:&quot;interact/scripts.html#adef-onchange&quot;</anchor-external></li></ul></li></ul></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="10" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[10]</anchor-end>
HTML 4 DTD の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">注釈</anchor> (参考) には
<q>the element value was changed</q>
と説明があります。</p><section><h1>代替</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="3" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[3]</anchor-end> 内在事象属性は<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">表現と構造の分離</anchor>の原則に反するので、
好ましくないと考える人もいます。また、 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">DOM 0</anchor>
に基づく古い設計です。</p><p>代わりに、 <code class="HTMLe"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">script</anchor></code> 要素などにより関連付けたスクリプト内で
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">DOM 2</anchor> 以上の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">事象</anchor>に関するメソッド等が利用できます。
DOM 水準 2 や DOM 水準 3 はこの属性に対応する
DOM の事象 <code class="DOM"><var>ev:</var><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">change</anchor></code> を用意しています。</p></section><section><h1>属性値</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[4]</anchor-end> この属性の値は <code class="SGML">%<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Script</anchor></code> です。 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">SGML</anchor>
的には <code class="SGML"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CDATA</anchor></code> です。
自称が発生したときに実行するスクリプトの code
を記述します。<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクリプト言語</anchor>は、
<code class="HTTP"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Content-Script-Type</anchor></code> によります。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="5" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[5]</anchor-end> この属性は省略可能です。</p><form xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" ref="comment"></form></section><section><h1>他との関係</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="6" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[6]</anchor-end> この属性に対応する DOM の事象は <code class="DOM"><var>ev:</var><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">change</anchor></code>
です。そちらもあわせてごらんください。</p><form xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" ref="comment"></form></section><section><h1>例</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="7" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[7]</anchor-end> 値変更時に確認を行う例 (JavaScript) <src xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:">HTML 4 18.2.3</src><pre class="HTML">&lt;INPUT NAME=&quot;num&quot;
    onchange=&quot;if (!checkNum(this.value, 1, 10)) 
        {this.focus();this.select();} else {thanks()}&quot;
    VALUE=&quot;0&quot;&gt;</pre></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="8" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[8]</anchor-end> 値変更時に有効・無効を切替る例 (VBScript) <src xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:">HTML 4 18.2.3</src><pre class="HTML">    &lt;INPUT name=&quot;edit1&quot; size=&quot;50&quot;&gt;    
    &lt;SCRIPT type=&quot;text/vbscript&quot;&gt;
      Sub edit1_changed()
        If edit1.value = &quot;abc&quot; Then
          button1.enabled = True
        Else
          button1.enabled = False
        End If
      End Sub
    &lt;/SCRIPT&gt;</pre></p><p>HTML 4 仕様書に載っていた例ですが、 VBScript
では <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">VB</anchor> と同じ、手続き名による事象取扱器に関する例示を行いたかったのでしょうか。</p><p>値変更時に有効・無効を切替る例 (Tcl) <src xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:">HTML 4 18.2.3</src><pre class="HTML">    &lt;INPUT name=&quot;edit1&quot; size=&quot;50&quot;&gt;
    &lt;SCRIPT type=&quot;text/tcl&quot;&gt;
      proc edit1_changed {} {
        if {[edit value] == abc} {
          button1 enable 1
        } else {
          button1 enable 0
        }
      }
      edit1 onChange edit1_changed
    &lt;/SCRIPT&gt;</pre></p><p>VBScript と同じことを Tcl で書いた例ですが、
Tcl では登録が必要なようです (JavaScript の
<code class="JS">edit1.onchange</code> への代入に相当か)。</p><form xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" ref="comment"></form></section><section><h1>メモ</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="11" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[11]</anchor-end>
<cite>Bug 126379 - Select onChange not called using down arrow key</cite> 
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://bugzilla.mozilla.org/show_bug.cgi?id=126379">https://bugzilla.mozilla.org/show_bug.cgi?id=126379</anchor-external></p><p><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)</cite> 
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://lists.w3.org/Archives/Public/www-html-editor/2003AprJun/0061.html">http://lists.w3.org/Archives/Public/www-html-editor/2003AprJun/0061.html</anchor-external></p><p><cite>Re: Error in HTML 4.01 specification of 'onchange' event</cite>
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="mid:20050803032957.99737.qmail@web50207.mail.yahoo.com">mid:20050803032957.99737.qmail@web50207.mail.yahoo.com</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="12" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[12]</anchor-end> <cite xml:lang="en-GB-x-Hixie">Web Forms 2.0</cite> (<time>2009-01-05 20:07:15 +09:00</time> 版) <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://www.whatwg.org/specs/web-forms/current-work/#the-change">http://www.whatwg.org/specs/web-forms/current-work/#the-change</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="13" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[13]</anchor-end> <cite xml:lang="en">Web Applications 1.0 r8367     Revamp 'input' and 'change' event logic for &lt;input&gt; 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.</cite>
( (<time>2013-12-19 09:03:00 +09:00</time> 版))
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://html5.org/tools/web-apps-tracker?from=8366&amp;to=8367">http://html5.org/tools/web-apps-tracker?from=8366&amp;to=8367</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="14" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[14]</anchor-end> <cite xml:lang="en">Web Applications 1.0 r8720     Block popups from some weird edge cases that fire 'change' events on &lt;select&gt; as a result of script.</cite>
( (<time>2014-08-27 08:53:00 +09:00</time> 版))
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://html5.org/r/8720">http://html5.org/r/8720</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="15" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[15]</anchor-end> <cite xml:lang="en">Web Applications 1.0 r8723     Fire 'change' when unselected a video track too.</cite>
( (<time>2014-08-29 03:49:00 +09:00</time> 版))
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://html5.org/r/8723">http://html5.org/r/8723</anchor-external></p><figure class="quote"><figcaption><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="9" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[9]</anchor-end> <cite>AngularJS - inputのchangeイベントが発火しない時の対処法 - Qiita</cite>
(<time>2015-04-24 16:32:34 +09:00</time> 版)
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://qiita.com/morigamix/items/9965bf6c282d43f291ad">http://qiita.com/morigamix/items/9965bf6c282d43f291ad</anchor-external></p></figcaption><blockquote><p>input<strong>[</strong>type=&quot;date&quot;<strong>]</strong>などに入力する際は専用のオートコンプリートが提供されますが、</p><p>端末によってchangeイベントが発火しない場合があります。(検証ではHTL21, SC-06Dで再現)</p></blockquote></figure></section></section></body></html>