[html5] r2282 - [] (0) WF2: input and change events; activation behaviors for <input> element.
whatwg at whatwg.org
whatwg at whatwg.org
Sun Oct 5 02:19:55 PDT 2008
Author: ianh
Date: 2008-10-05 02:19:54 -0700 (Sun, 05 Oct 2008)
New Revision: 2282
Modified:
index
source
Log:
[] (0) WF2: input and change events; activation behaviors for <input> element.
Modified: index
===================================================================
--- index 2008-10-04 01:28:23 UTC (rev 2281)
+++ index 2008-10-05 09:19:54 UTC (rev 2282)
@@ -16,7 +16,7 @@
<div class=head>
<p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<h1>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 4 October 2008</h2>
+ <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 5 October 2008</h2>
<p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<dl><dt>Multiple-page version:</dt>
@@ -534,7 +534,8 @@
<li><a href=#the-pattern-attribute><span class=secno>4.10.4.2.7 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
<li><a href=#the-min-and-max-attributes><span class=secno>4.10.4.2.8 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
<li><a href=#the-step-attribute><span class=secno>4.10.4.2.9 </span>The <code title=attr-input-step>step</code> attribute</a></ol></li>
- <li><a href=#common-input-element-apis><span class=secno>4.10.4.3 </span>Common <code>input</code> element APIs</a></ol></li>
+ <li><a href=#common-input-element-apis><span class=secno>4.10.4.3 </span>Common <code>input</code> element APIs</a></li>
+ <li><a href=#common-event-behaviors><span class=secno>4.10.4.4 </span>Common event behaviors</a></ol></li>
<li><a href=#the-button-element><span class=secno>4.10.5 </span>The <code>button</code> element</a></li>
<li><a href=#the-select-element><span class=secno>4.10.6 </span>The <code>select</code> element</a></li>
<li><a href=#the-datalist-element><span class=secno>4.10.7 </span>The <code>datalist</code> element</a></li>
@@ -23685,6 +23686,50 @@
<td class=no> · <!-- Reset Button -->
<!-- <td class="no"> · Button -->
+ <tr><th> <code title=event-input-input><a href=#event-input-input>input</a></code> event
+ <td class=no> · <!-- Hidden -->
+ <td class=yes> Yes <!-- Text -->
+<!-- <td class="yes"> Yes E-mail -->
+<!-- <td class="yes"> Yes URL -->
+ <td class=yes> Yes <!-- Password -->
+ <td class=yes> Yes <!-- Date and Time -->
+<!-- <td class="yes"> Yes Date -->
+<!-- <td class="yes"> Yes Month -->
+<!-- <td class="yes"> Yes Week -->
+<!-- <td class="yes"> Yes Time -->
+ <td class=yes> Yes <!-- Local Date and Time -->
+<!-- <td class="yes"> Yes Number -->
+ <td class=yes> Yes <!-- Range -->
+ <td class=yes> Yes <!-- Checkbox -->
+<!-- <td class="yes"> Yes Radio Button -->
+ <td class=no> · <!-- File Upload -->
+ <td class=no> · <!-- Submit Button -->
+ <td class=no> · <!-- Image Button -->
+ <td class=no> · <!-- Reset Button -->
+<!-- <td class="no"> · Button -->
+
+ <tr><th> <code title=event-input-change><a href=#event-input-change>change</a></code> event
+ <td class=no> · <!-- Hidden -->
+ <td class=yes> Yes <!-- Text -->
+<!-- <td class="yes"> Yes E-mail -->
+<!-- <td class="yes"> Yes URL -->
+ <td class=yes> Yes <!-- Password -->
+ <td class=yes> Yes <!-- Date and Time -->
+<!-- <td class="yes"> Yes Date -->
+<!-- <td class="yes"> Yes Month -->
+<!-- <td class="yes"> Yes Week -->
+<!-- <td class="yes"> Yes Time -->
+ <td class=yes> Yes <!-- Local Date and Time -->
+<!-- <td class="yes"> Yes Number -->
+ <td class=yes> Yes <!-- Range -->
+ <td class=yes> Yes <!-- Checkbox -->
+<!-- <td class="yes"> Yes Radio Button -->
+ <td class=yes> Yes <!-- File Upload -->
+ <td class=no> · <!-- Submit Button -->
+ <td class=no> · <!-- Image Button -->
+ <td class=no> · <!-- Reset Button -->
+<!-- <td class="no"> · Button -->
+
</table><p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute changes state, and
when the element is first created, the element's rendering and
behaviour must change to the new state's accordingly and the
@@ -23807,11 +23852,8 @@
serialisation. e.g. should it be 2008-01-01T00:00 or
2008-01-01t00:00? should it be 1e2 or 100? -->
- <!-- XXX for each of these, need to say when to fire oninput and
- onchange -->
-
<h6 id=hidden-state><span class=secno>4.10.4.1.1 </span><dfn title=attr-input-type-hidden>Hidden</dfn> state</h6>
<p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state, the rules in
@@ -23867,6 +23909,7 @@
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not fire.</p>
<h6 id=text-state><span class=secno>4.10.4.1.2 </span><dfn title=attr-input-type-text>Text</dfn> state</h6>
@@ -23902,6 +23945,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -23968,6 +24013,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -24031,6 +24078,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -24082,6 +24131,8 @@
<code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
<code title=attr-input-value><a href=#attr-input-value>value</a></code> DOM attribute.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -24201,6 +24252,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -24313,6 +24366,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -24425,6 +24480,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -24537,6 +24594,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -24643,6 +24702,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -24741,6 +24802,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -24833,6 +24896,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -24951,6 +25016,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -24985,13 +25052,19 @@
false, a negative selection.</p>
<p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
- the user should allow the user to toggle the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state.</p>
+ then: The <a href=#pre-click-activation-steps>pre-click activation steps</a> consist of setting
+ the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to
+ its opposite value (i.e. true if it is false, false if it is
+ true). The <a href=#canceled-activation-steps>canceled activation steps</a> consist of setting
+ the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> back to the
+ value it had before the <a href=#pre-click-activation-steps>pre-click activation steps</a> were
+ run. The <a href=#activation-behavior>activation behavior</a> is to <a href=#fire-a-simple-event>fire a simple
+ event</a> called <code title=event-change>change</code> at the
+ element.</p>
<p><strong>Constraint validation:</strong> If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and its <span title=concept-fe-checkedness>checkedness</span> is false, then the
element is <a href=#suffering-from-being-missing>suffering from being missing</a>.</p>
- <!-- XXX event timing; activation behavior -->
-
<p>The following common <code><a href=#the-input-element>input</a></code> element content
attributes and DOM attributes apply to the element:
<code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, and
@@ -25002,6 +25075,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-default-on title=dom-input-value-default-on>default/on</a>.</p>
+ <p>The <code title=event-input-change><a href=#event-input-change>change</a></code> event applies.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -25029,8 +25104,11 @@
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> event does not
+ apply.</p>
+
<h6 id=radio-button-state><span class=secno>4.10.4.1.15 </span><dfn title=attr-input-type-radio>Radio Button</dfn> state</h6>
<p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, the rules
@@ -25063,14 +25141,10 @@
</ul><p>A document must not contain an <code><a href=#the-input-element>input</a></code> element whose
<i><a href=#radio-button-group>radio button group</a></i> contains only that element.</p>
- <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
- the user should allow the user to set the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state of the
- element to true.</p>
-
<p>When any of the following events occur, if the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state is true after
the event, the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state of all the
other elements in the same <i><a href=#radio-button-group>radio button group</a></i> must be set to
- false:</p> <!-- XXX event firing order and timing -->
+ false:</p>
<ul><li>The element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state is set to
true (for whatever reason).</li>
@@ -25081,14 +25155,21 @@
<li>The element's <a href=#form-owner>form owner</a> changes.</li>
- </ul><p><strong>Constraint validation:</strong> If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and all of the
+ </ul><p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
+ then: The <a href=#pre-click-activation-steps>pre-click activation steps</a> consist of setting
+ the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to
+ true. The <a href=#canceled-activation-steps>canceled activation steps</a> consist of setting
+ the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to
+ false. The <a href=#activation-behavior>activation behavior</a> is to <a href=#fire-a-simple-event>fire a
+ simple event</a> called <code title=event-change>change</code>
+ at the element.</p>
+
+ <p><strong>Constraint validation:</strong> If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and all of the
<code><a href=#the-input-element>input</a></code> elements in the <i><a href=#radio-button-group>radio button group</a></i> have a
<span title=concept-fe-checkedness>checkedness</span> that is
false, then the element is <a href=#suffering-from-being-missing>suffering from being
missing</a>.</p>
- <!-- XXX event timing; activation behavior -->
-
<p>The following common <code><a href=#the-input-element>input</a></code> element content
attributes and DOM attributes apply to the element:
<code title=attr-input-checked><a href=#attr-input-checked>checked</a></code> and
@@ -25099,6 +25180,8 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
in mode <a href=#dom-input-value-default-on title=dom-input-value-default-on>default/on</a>.</p>
+ <p>The <code title=event-input-change><a href=#event-input-change>change</a></code> event applies.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
@@ -25126,9 +25209,12 @@
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> event does not
+ apply.</p>
+
<h6 id=file-upload-state><span class=secno>4.10.4.1.16 </span><dfn title=attr-input-type-file>File Upload</dfn> state</h6>
<p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, the rules in this
@@ -25186,6 +25272,8 @@
<code title=attr-input-accept><a href=#attr-input-accept>accept</a></code> and
<code title=attr-input-required><a href=#attr-input-required>required</a></code>.</p>
+ <p>The <code title=event-input-change><a href=#event-input-change>change</a></code> event applies.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class=no-backref title=attr-fs-action><a href=#attr-fs-action>action</a></code>,
@@ -25218,9 +25306,12 @@
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> event does not
+ apply.</p>
+
<h6 id=submit-button-state><span class=secno>4.10.4.1.17 </span><dfn title=attr-input-type-submit>Submit Button</dfn> state</h6>
<p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> state, the rules
@@ -25234,12 +25325,11 @@
<p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
the user should allow the user to activate the element.</p>
- <!-- XXX event timing; activation behavior -->
+ <p>The element's <a href=#activation-behavior>activation behavior</a>, if the element
+ has a <a href=#form-owner>form owner</a>, is to <a href=#concept-form-submit title=concept-form-submit>submit</a> the <a href=#form-owner>form
+ owner</a> from the <code><a href=#the-input-element>input</a></code> element; otherwise, it is
+ to do nothing.</p>
- <p>When the element is activated, if the element has a <a href=#form-owner>form
- owner</a>, the element must <a href=#concept-form-submit title=concept-form-submit>submit</a> the <a href=#form-owner>form
- owner</a> from the <code><a href=#the-input-element>input</a></code> element.</p>
-
<p>The <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>, <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>, <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>, and <code title=attr-fs-target><a href=#attr-fs-target>target</a></code> attributes control the form
submission.</p>
@@ -25280,8 +25370,10 @@
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
+ <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not fire.</p>
+
<h6 id=image-button-state><span class=secno>4.10.4.1.18 </span><dfn title=attr-input-type-image>Image Button</dfn> state</h6>
<p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, the rules
@@ -25361,21 +25453,23 @@
selecting a <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a> from
the image specified by the <code title=attr-input-src><a href=#attr-input-src>src</a></code>
attribute; if the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>, the user should allow the
- user to select this <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a>, at
- which point the element's <a href=#form-owner>form owner</a>, if any, must be
- <a href=#concept-form-submit title=concept-form-submit>submitted</a> from the
- <code><a href=#the-input-element>input</a></code> element.</p>
+ user to select this <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a>. The
+ <a href=#activation-behavior>activation behavior</a> in this case consists of taking the
+ user's selected <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a>, and
+ then, if the element has a <a href=#form-owner>form owner</a>, <a href=#concept-form-submit title=concept-form-submit>submitting</a> the <code><a href=#the-input-element>input</a></code>
+ element's <a href=#form-owner>form owner</a> from the <code><a href=#the-input-element>input</a></code>
+ element.</p>
<p>Otherwise, the element represents a submit button whose label is
given by the value of the <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>
attribute; if the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>, the user should allow the
- user to activate the button, at which point the the <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
- coordinate</a> must be set to (0,0) and the element's <a href=#form-owner>form
- owner</a>, if any, must be <a href=#concept-form-submit title=concept-form-submit>submitted</a> from the
- <code><a href=#the-input-element>input</a></code> element.</p>
+ user to activate the button. The <a href=#activation-behavior>activation behavior</a> in
+ this case consists of setting the <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
+ coordinate</a> to (0,0), and then, if the element has a
+ <a href=#form-owner>form owner</a>, <a href=#concept-form-submit title=concept-form-submit>submitting</a> the <code><a href=#the-input-element>input</a></code>
+ element's <a href=#form-owner>form owner</a> from the <code><a href=#the-input-element>input</a></code>
+ element.</p>
- <!-- XXX event timing; activation behavior -->
-
<p>The <dfn id=concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
coordinate</dfn> must consist of an <var title="">x</var>-component
and a <var title="">y</var>-component. The <var title="">x</var>-component must be greater than or equal to zero,
@@ -25427,6 +25521,8 @@
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
+ <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not fire.</p>
+
<p class=note>Many aspects of this state's behavior are similar to
the behavior of the <code><a href=#the-img-element>img</a></code> element. Readers are encouraged
to read that section, where many of the same requirements are
@@ -25447,12 +25543,10 @@
<p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
the user should allow the user to activate the element.</p>
- <!-- XXX event timing; activation behavior -->
+ <p>The element's <a href=#activation-behavior>activation behavior</a>, if the element
+ has a <a href=#form-owner>form owner</a>, is to <a href=#concept-form-reset title=concept-form-reset>reset</a> the <a href=#form-owner>form owner</a>;
+ otherwise, it is to do nothing.</p>
- <p>When the element is activated, if the element has a <a href=#form-owner>form
- owner</a>, the element must <a href=#concept-form-reset title=concept-form-reset>reset</a> the <a href=#form-owner>form
- owner</a>.</p>
-
<p><strong>Constraint validation:</strong> The element is
<a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
@@ -25489,8 +25583,10 @@
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
+ <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not fire.</p>
+
<h6 id=button-state><span class=secno>4.10.4.1.20 </span><dfn title=attr-input-type-button>Button</dfn> state</h6>
<p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#button-state title=attr-input-type-button>Button</a> state, the rules in
@@ -25502,10 +25598,9 @@
string.</p>
<p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
- the user should allow the user to activate the element.</p>
+ the user should allow the user to activate the element. The
+ element's <a href=#activation-behavior>activation behavior</a> is to do nothing.</p>
- <!-- XXX event timing; activation behavior -->
-
<p><strong>Constraint validation:</strong> The element is
<a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
@@ -25542,8 +25637,10 @@
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
+ <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not fire.</p>
+
<h6 id=common-algorithms><span class=secno>4.10.4.1.21 </span>Common algorithms</h6>
<p>When a user agent is to <dfn id=strip-line-breaks-from-the-value>strip line breaks from the
@@ -25983,8 +26080,47 @@
<p class=XXX>... <dfn id=dom-input-selectedoption title=dom-input-selectedOption><code>selectedOption</code></dfn></p>
+ <h5 id=common-event-behaviors><span class=secno>4.10.4.4 </span>Common event behaviors</h5>
+ <p>When the <dfn id=event-input-input title=event-input-input><code>input</code></dfn>
+ event applies, the user agent must <a href=#queue-a-task>queue a task</a> to
+ <a href=#fire-a-simple-event>fire a simple event</a> called <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element
+ any time the user causes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to change. User agents may
+ wait for a suitable break in the user's interaction before queuing
+ the task; for example, a user agent could wait for the user to have
+ not hit a key for 100ms, so as to only fire the event when the user
+ pauses, instead of continuously for each keystroke.</p>
+ <p>When the <dfn id=event-input-change title=event-input-change><code>change</code></dfn> event applies,
+ if the element does not have an <a href=#activation-behavior>activation behavior</a>
+ defined but uses a user interface that involves an explicit commit
+ action, then the user agent must <a href=#queue-a-task>queue a task</a> to
+ <a href=#fire-a-simple-event>fire a simple event</a> called <code title=event-change>change</code> at the <code><a href=#the-input-element>input</a></code> element
+ any time the <em>user</em> commits a change to the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>.</p>
+
+ <p class=example>An example of a user interface with a commit
+ action would be a <a href=#file-upload-state title=attr-input-type-file>File
+ Upload</a> control that consists of a single button that brings
+ up a file selection dialog: when the dialog is closed, if that the
+ <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>file selection</a>
+ changed as a result, then the user has commited a new <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>file selection</a>.</p>
+
+ <p class=example>Another example of a user interface with a commit
+ action would be a <a href=#date-state title=attr-input-type-date>Date</a>
+ control that allows both text-based user input and user selection
+ from a drop-down calendar: while text input might not have an
+ explicit commit step, selecting a date from the drop down calendar
+ and then dismissing the drop down would be a commit action.</p>
+
+ <p>In addition, when the <code title=event-input-change><a href=#event-input-change>change</a></code> event applies, <code title=event-change>change</code> events can also be fired as part
+ of the element's <span>action behavior</span> and as part of the
+ <a href=#unfocusing-steps>unfocusing steps</a>.</p>
+
+ <p>The <a href=#task-source>task source</a> for these <span title=concept-tasks>task</span> is the <a href=#user-interaction-task-source>user interaction task
+ source</a>.</p>
+
+
+
<h4 id=the-button-element><span class=secno>4.10.5 </span>The <dfn><code>button</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
@@ -38454,8 +38590,15 @@
<p>The <dfn id=unfocusing-steps>unfocusing steps</dfn> are as follows:</p>
- <ol><!-- XXX onchange event for input controls --><li><p>Unfocus the element.</li>
+ <ol><li><p>If the element is an <code><a href=#the-input-element>input</a></code> element, and the
+ <code title=event-input-change><a href=#event-input-change>change</a></code> event applies to the
+ element, and the element does not have a defined <a href=#activation-behavior>activation
+ behavior</a>, and the user has changed the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or its list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>
+ while the control was focused without committing that change, then
+ <a href=#fire-a-simple-event>fire a simple event</a> called <code title=event-change>change</code> at the element.</p>
+ <li><p>Unfocus the element.</li>
+
<li><p><a href=#fire-a-simple-event>Fire a simple event</a> that doesn't bubble called
<code title=event-blur>blur</code> at the element.</li>
Modified: source
===================================================================
--- source 2008-10-04 01:28:23 UTC (rev 2281)
+++ source 2008-10-05 09:19:54 UTC (rev 2282)
@@ -26277,6 +26277,52 @@
<td class="no"> · <!-- Reset Button -->
<!-- <td class="no"> · Button -->
+ <tr>
+ <th> <code title="event-input-input">input</code> event
+ <td class="no"> · <!-- Hidden -->
+ <td class="yes"> Yes <!-- Text -->
+<!-- <td class="yes"> Yes E-mail -->
+<!-- <td class="yes"> Yes URL -->
+ <td class="yes"> Yes <!-- Password -->
+ <td class="yes"> Yes <!-- Date and Time -->
+<!-- <td class="yes"> Yes Date -->
+<!-- <td class="yes"> Yes Month -->
+<!-- <td class="yes"> Yes Week -->
+<!-- <td class="yes"> Yes Time -->
+ <td class="yes"> Yes <!-- Local Date and Time -->
+<!-- <td class="yes"> Yes Number -->
+ <td class="yes"> Yes <!-- Range -->
+ <td class="yes"> Yes <!-- Checkbox -->
+<!-- <td class="yes"> Yes Radio Button -->
+ <td class="no"> · <!-- File Upload -->
+ <td class="no"> · <!-- Submit Button -->
+ <td class="no"> · <!-- Image Button -->
+ <td class="no"> · <!-- Reset Button -->
+<!-- <td class="no"> · Button -->
+
+ <tr>
+ <th> <code title="event-input-change">change</code> event
+ <td class="no"> · <!-- Hidden -->
+ <td class="yes"> Yes <!-- Text -->
+<!-- <td class="yes"> Yes E-mail -->
+<!-- <td class="yes"> Yes URL -->
+ <td class="yes"> Yes <!-- Password -->
+ <td class="yes"> Yes <!-- Date and Time -->
+<!-- <td class="yes"> Yes Date -->
+<!-- <td class="yes"> Yes Month -->
+<!-- <td class="yes"> Yes Week -->
+<!-- <td class="yes"> Yes Time -->
+ <td class="yes"> Yes <!-- Local Date and Time -->
+<!-- <td class="yes"> Yes Number -->
+ <td class="yes"> Yes <!-- Range -->
+ <td class="yes"> Yes <!-- Checkbox -->
+<!-- <td class="yes"> Yes Radio Button -->
+ <td class="yes"> Yes <!-- File Upload -->
+ <td class="no"> · <!-- Submit Button -->
+ <td class="no"> · <!-- Image Button -->
+ <td class="no"> · <!-- Reset Button -->
+<!-- <td class="no"> · Button -->
+
</table>
<p>When an <code>input</code> element's <code
@@ -26456,11 +26502,8 @@
serialisation. e.g. should it be 2008-01-01T00:00 or
2008-01-01t00:00? should it be 1e2 or 100? -->
- <!-- XXX for each of these, need to say when to fire oninput and
- onchange -->
-
<h6><dfn title="attr-input-type-hidden">Hidden</dfn> state</h6>
<p>When an <code>input</code> element's <code
@@ -26518,6 +26561,9 @@
<code class="no-backref" title="dom-input-stepUp">stepUp()</code>, and
<code class="no-backref" title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <p>The <code class="no-backref"
+ title="event-input-input">input</code> and <code class="no-backref"
+ title="event-input-change">change</code> events do not fire.</p>
<h6><dfn title="attr-input-type-text">Text</dfn> state</h6>
@@ -26556,6 +26602,9 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -26630,6 +26679,9 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -26700,6 +26752,9 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -26755,6 +26810,9 @@
<code title="attr-input-size">size</code> content attributes;
<code title="attr-input-value">value</code> DOM attribute.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -26895,6 +26953,9 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -27024,6 +27085,9 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -27155,6 +27219,9 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -27285,6 +27352,9 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -27410,6 +27480,9 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -27522,6 +27595,9 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -27623,6 +27699,9 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -27762,6 +27841,9 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -27799,16 +27881,21 @@
false, a negative selection.</p>
<p>If the element is <i title="concept-input-mutable">mutable</i>,
- the user should allow the user to toggle the <span
- title="concept-fe-checked">checkedness</span> state.</p>
+ then: The <span>pre-click activation steps</span> consist of setting
+ the element's <span title="concept-fe-checked">checkedness</span> to
+ its opposite value (i.e. true if it is false, false if it is
+ true). The <span>canceled activation steps</span> consist of setting
+ the <span title="concept-fe-checked">checkedness</span> back to the
+ value it had before the <span>pre-click activation steps</span> were
+ run. The <span>activation behavior</span> is to <span>fire a simple
+ event</span> called <code title="event-change">change</code> at the
+ element.</p>
<p><strong>Constraint validation:</strong> If the element is <i
title="concept-input-required">required</i> and its <span
title="concept-fe-checkedness">checkedness</span> is false, then the
element is <span>suffering from being missing</span>.</p>
- <!-- XXX event timing; activation behavior -->
-
<p>The following common <code>input</code> element content
attributes and DOM attributes apply to the element:
<code title="attr-input-checked">checked</code>, and
@@ -27819,6 +27906,8 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-default-on">default/on</span>.</p>
+ <p>The <code title="event-input-change">change</code> event applies.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -27846,8 +27935,11 @@
<code class="no-backref" title="dom-input-stepDown">stepDown()</code> and
<code class="no-backref" title="dom-input-stepUp">stepUp()</code> methods.</p>
+ <p>The <code title="event-input-input">input</code> event does not
+ apply.</p>
+
<h6><dfn title="attr-input-type-radio">Radio Button</dfn> state</h6>
<p>When an <code>input</code> element's <code
@@ -27891,17 +27983,12 @@
<p>A document must not contain an <code>input</code> element whose
<i>radio button group</i> contains only that element.</p>
- <p>If the element is <i title="concept-input-mutable">mutable</i>,
- the user should allow the user to set the <span
- title="concept-fe-checked">checkedness</span> state of the
- element to true.</p>
-
<p>When any of the following events occur, if the element's <span
title="concept-fe-checked">checkedness</span> state is true after
the event, the <span
title="concept-fe-checked">checkedness</span> state of all the
other elements in the same <i>radio button group</i> must be set to
- false:</p> <!-- XXX event firing order and timing -->
+ false:</p>
<ul>
@@ -27917,6 +28004,15 @@
</ul>
+ <p>If the element is <i title="concept-input-mutable">mutable</i>,
+ then: The <span>pre-click activation steps</span> consist of setting
+ the element's <span title="concept-fe-checked">checkedness</span> to
+ true. The <span>canceled activation steps</span> consist of setting
+ the element's <span title="concept-fe-checked">checkedness</span> to
+ false. The <span>activation behavior</span> is to <span>fire a
+ simple event</span> called <code title="event-change">change</code>
+ at the element.</p>
+
<p><strong>Constraint validation:</strong> If the element is <i
title="concept-input-required">required</i> and all of the
<code>input</code> elements in the <i>radio button group</i> have a
@@ -27924,8 +28020,6 @@
false, then the element is <span>suffering from being
missing</span>.</p>
- <!-- XXX event timing; activation behavior -->
-
<p>The following common <code>input</code> element content
attributes and DOM attributes apply to the element:
<code title="attr-input-checked">checked</code> and
@@ -27936,6 +28030,8 @@
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-default-on">default/on</span>.</p>
+ <p>The <code title="event-input-change">change</code> event applies.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept">accept</code>,
@@ -27963,9 +28059,12 @@
<code class="no-backref" title="dom-input-stepDown">stepDown()</code> and
<code class="no-backref" title="dom-input-stepUp">stepUp()</code> methods.</p>
+ <p>The <code title="event-input-input">input</code> event does not
+ apply.</p>
+
<h6><dfn title="attr-input-type-file">File Upload</dfn> state</h6>
<p>When an <code>input</code> element's <code
@@ -28039,6 +28138,8 @@
<code title="attr-input-accept">accept</code> and
<code title="attr-input-required">required</code>.</p>
+ <p>The <code title="event-input-change">change</code> event applies.</p>
+
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-fs-action">action</code>,
@@ -28071,9 +28172,12 @@
<code class="no-backref" title="dom-input-stepDown">stepDown()</code> and
<code class="no-backref" title="dom-input-stepUp">stepUp()</code> methods.</p>
+ <p>The <code title="event-input-input">input</code> event does not
+ apply.</p>
+
<h6><dfn title="attr-input-type-submit">Submit Button</dfn> state</h6>
<p>When an <code>input</code> element's <code
@@ -28090,12 +28194,11 @@
<p>If the element is <i title="concept-input-mutable">mutable</i>,
the user should allow the user to activate the element.</p>
- <!-- XXX event timing; activation behavior -->
-
- <p>When the element is activated, if the element has a <span>form
- owner</span>, the element must <span
+ <p>The element's <span>activation behavior</span>, if the element
+ has a <span>form owner</span>, is to <span
title="concept-form-submit">submit</span> the <span>form
- owner</span> from the <code>input</code> element.</p>
+ owner</span> from the <code>input</code> element; otherwise, it is
+ to do nothing.</p>
<p>The <code title="attr-fs-action">action</code>, <code
title="attr-fs-enctype">enctype</code>, <code
@@ -28140,8 +28243,12 @@
<code class="no-backref" title="dom-input-stepDown">stepDown()</code> and
<code class="no-backref" title="dom-input-stepUp">stepUp()</code> methods.</p>
+ <p>The <code class="no-backref"
+ title="event-input-input">input</code> and <code class="no-backref"
+ title="event-input-change">change</code> events do not fire.</p>
+
<h6><dfn title="attr-input-type-image">Image Button</dfn> state</h6>
<p>When an <code>input</code> element's <code
@@ -28253,24 +28360,28 @@
attribute; if the element is <i
title="concept-input-mutable">mutable</i>, the user should allow the
user to select this <span
- title="concept-input-type-image-coordinate">coordinate</span>, at
- which point the element's <span>form owner</span>, if any, must be
- <span title="concept-form-submit">submitted</span> from the
- <code>input</code> element.</p>
+ title="concept-input-type-image-coordinate">coordinate</span>. The
+ <span>activation behavior</span> in this case consists of taking the
+ user's selected <span
+ title="concept-input-type-image-coordinate">coordinate</span>, and
+ then, if the element has a <span>form owner</span>, <span
+ title="concept-form-submit">submitting</span> the <code>input</code>
+ element's <span>form owner</span> from the <code>input</code>
+ element.</p>
<p>Otherwise, the element represents a submit button whose label is
given by the value of the <code title="attr-input-alt">alt</code>
attribute; if the element is <i
title="concept-input-mutable">mutable</i>, the user should allow the
- user to activate the button, at which point the the <span
+ user to activate the button. The <span>activation behavior</span> in
+ this case consists of setting the <span
title="concept-input-type-image-coordinate">selected
- coordinate</span> must be set to (0,0) and the element's <span>form
- owner</span>, if any, must be <span
- title="concept-form-submit">submitted</span> from the
- <code>input</code> element.</p>
+ coordinate</span> to (0,0), and then, if the element has a
+ <span>form owner</span>, <span
+ title="concept-form-submit">submitting</span> the <code>input</code>
+ element's <span>form owner</span> from the <code>input</code>
+ element.</p>
- <!-- XXX event timing; activation behavior -->
-
<p>The <dfn
title="concept-input-type-image-coordinate">selected
coordinate</dfn> must consist of an <var title="">x</var>-component
@@ -28329,6 +28440,10 @@
<code class="no-backref" title="dom-input-stepDown">stepDown()</code> and
<code class="no-backref" title="dom-input-stepUp">stepUp()</code> methods.</p>
+ <p>The <code class="no-backref"
+ title="event-input-input">input</code> and <code class="no-backref"
+ title="event-input-change">change</code> events do not fire.</p>
+
<p class="note">Many aspects of this state's behavior are similar to
the behavior of the <code>img</code> element. Readers are encouraged
to read that section, where many of the same requirements are
@@ -28352,13 +28467,11 @@
<p>If the element is <i title="concept-input-mutable">mutable</i>,
the user should allow the user to activate the element.</p>
- <!-- XXX event timing; activation behavior -->
+ <p>The element's <span>activation behavior</span>, if the element
+ has a <span>form owner</span>, is to <span
+ title="concept-form-reset">reset</span> the <span>form owner</span>;
+ otherwise, it is to do nothing.</p>
- <p>When the element is activated, if the element has a <span>form
- owner</span>, the element must <span
- title="concept-form-reset">reset</span> the <span>form
- owner</span>.</p>
-
<p><strong>Constraint validation:</strong> The element is
<span>barred from constraint validation</span>.</p>
@@ -28396,8 +28509,12 @@
<code class="no-backref" title="dom-input-stepDown">stepDown()</code> and
<code class="no-backref" title="dom-input-stepUp">stepUp()</code> methods.</p>
+ <p>The <code class="no-backref"
+ title="event-input-input">input</code> and <code class="no-backref"
+ title="event-input-change">change</code> events do not fire.</p>
+
<h6><dfn title="attr-input-type-button">Button</dfn> state</h6>
<p>When an <code>input</code> element's <code
@@ -28412,10 +28529,9 @@
string.</p>
<p>If the element is <i title="concept-input-mutable">mutable</i>,
- the user should allow the user to activate the element.</p>
+ the user should allow the user to activate the element. The
+ element's <span>activation behavior</span> is to do nothing.</p>
- <!-- XXX event timing; activation behavior -->
-
<p><strong>Constraint validation:</strong> The element is
<span>barred from constraint validation</span>.</p>
@@ -28453,8 +28569,12 @@
<code class="no-backref" title="dom-input-stepDown">stepDown()</code> and
<code class="no-backref" title="dom-input-stepUp">stepUp()</code> methods.</p>
+ <p>The <code class="no-backref"
+ title="event-input-input">input</code> and <code class="no-backref"
+ title="event-input-change">change</code> events do not fire.</p>
+
<h6>Common algorithms</h6>
<p>When a user agent is to <dfn>strip line breaks from the
@@ -29025,8 +29145,57 @@
<p class="XXX">... <dfn title="dom-input-selectedOption"><code>selectedOption</code></dfn></p>
+ <h5>Common event behaviors</h5>
+ <p>When the <dfn title="event-input-input"><code>input</code></dfn>
+ event applies, the user agent must <span>queue a task</span> to
+ <span>fire a simple event</span> called <code
+ title="event-input">input</code> at the <code>input</code> element
+ any time the user causes the element's <span
+ title="concept-fe-value">value</span> to change. User agents may
+ wait for a suitable break in the user's interaction before queuing
+ the task; for example, a user agent could wait for the user to have
+ not hit a key for 100ms, so as to only fire the event when the user
+ pauses, instead of continuously for each keystroke.</p>
+ <p>When the <dfn
+ title="event-input-change"><code>change</code></dfn> event applies,
+ if the element does not have an <span>activation behavior</span>
+ defined but uses a user interface that involves an explicit commit
+ action, then the user agent must <span>queue a task</span> to
+ <span>fire a simple event</span> called <code
+ title="event-change">change</code> at the <code>input</code> element
+ any time the <em>user</em> commits a change to the element's <span
+ title="concept-fe-value">value</span> or list of <span
+ title="concept-input-type-file-selected">selected files</span>.</p>
+
+ <p class="example">An example of a user interface with a commit
+ action would be a <span title="attr-input-type-file">File
+ Upload</span> control that consists of a single button that brings
+ up a file selection dialog: when the dialog is closed, if that the
+ <span title="concept-input-type-file-selected">file selection</span>
+ changed as a result, then the user has commited a new <span
+ title="concept-input-type-file-selected">file selection</span>.</p>
+
+ <p class="example">Another example of a user interface with a commit
+ action would be a <span title="attr-input-type-date">Date</span>
+ control that allows both text-based user input and user selection
+ from a drop-down calendar: while text input might not have an
+ explicit commit step, selecting a date from the drop down calendar
+ and then dismissing the drop down would be a commit action.</p>
+
+ <p>In addition, when the <code
+ title="event-input-change">change</code> event applies, <code
+ title="event-change">change</code> events can also be fired as part
+ of the element's <span>action behavior</span> and as part of the
+ <span>unfocusing steps</span>.</p>
+
+ <p>The <span>task source</span> for these <span
+ title="concept-tasks">task</span> is the <span>user interaction task
+ source</span>.</p>
+
+
+
<h4>The <dfn><code>button</code></dfn> element</h4>
<dl class="element">
@@ -43600,7 +43769,15 @@
<ol>
- <!-- XXX onchange event for input controls -->
+ <li><p>If the element is an <code>input</code> element, and the
+ <code title="event-input-change">change</code> event applies to the
+ element, and the element does not have a defined <span>activation
+ behavior</span>, and the user has changed the element's <span
+ title="concept-fe-value">value</span> or its list of <span
+ title="concept-input-type-file-selected">selected files</span>
+ while the control was focused without committing that change, then
+ <span>fire a simple event</span> called <code
+ title="event-change">change</code> at the element.</p>
<li><p>Unfocus the element.</p></li>
More information about the Commit-Watchers
mailing list