Skip to content
Browse files

[] (0) WF2: input and change events; activation behaviors for <input>…

… element.

git-svn-id: http://svn.whatwg.org/webapps@2282 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 993664e commit 4edc6d43739ae2342cec151c9c1843b0cccf881b @Hixie Hixie committed
Showing with 401 additions and 81 deletions.
  1. +183 −40 index
  2. +218 −41 source
View
223 index
@@ -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-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 4 October 2008</h2>
+ <h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 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 @@ function AddCloud(data, x, y) { ... }</pre>
<td class=no> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot; Button -->
+ <tr><th> <code title=event-input-input><a href=#event-input-input>input</a></code> event
+ <td class=no> &middot; <!-- 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> &middot; <!-- File Upload -->
+ <td class=no> &middot; <!-- Submit Button -->
+ <td class=no> &middot; <!-- Image Button -->
+ <td class=no> &middot; <!-- Reset Button -->
+<!-- <td class="no"> &middot; Button -->
+
+ <tr><th> <code title=event-input-change><a href=#event-input-change>change</a></code> event
+ <td class=no> &middot; <!-- 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> &middot; <!-- Submit Button -->
+ <td class=no> &middot; <!-- Image Button -->
+ <td class=no> &middot; <!-- Reset Button -->
+<!-- <td class="no"> &middot; 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,9 +23852,6 @@ function AddCloud(data, x, y) { ... }</pre>
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>
@@ -23867,6 +23909,7 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
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 @@ function AddCloud(data, x, y) { ... }</pre>
<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,6 +25104,9 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
@@ -25063,14 +25141,10 @@ function AddCloud(data, x, y) { ... }</pre>
</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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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,6 +25209,9 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
+
@@ -25186,6 +25272,8 @@ function AddCloud(data, x, y) { ... }</pre>
<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,6 +25306,9 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
+
@@ -25234,11 +25325,10 @@ function AddCloud(data, x, y) { ... }</pre>
<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>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 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>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,6 +25370,8 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
@@ -25361,20 +25453,22 @@ function AddCloud(data, x, y) { ... }</pre>
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>
-
- <!-- XXX event timing; activation behavior -->
+ 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>
<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
@@ -25427,6 +25521,8 @@ function AddCloud(data, x, y) { ... }</pre>
<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,11 +25543,9 @@ function AddCloud(data, x, y) { ... }</pre>
<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>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>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><strong>Constraint validation:</strong> The element is
<a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
@@ -25489,6 +25583,8 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
@@ -25502,9 +25598,8 @@ function AddCloud(data, x, y) { ... }</pre>
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>
-
- <!-- XXX event timing; activation behavior -->
+ 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>
<p><strong>Constraint validation:</strong> The element is
<a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
@@ -25542,6 +25637,8 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
@@ -25983,6 +26080,45 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
@@ -38454,7 +38590,14 @@ at the first element with the given ID must be treated as if it was cloned and r
<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>
View
259 source
@@ -26277,6 +26277,52 @@ function AddCloud(data, x, y) { ... }</pre>
<td class="no"> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot; Button -->
+ <tr>
+ <th> <code title="event-input-input">input</code> event
+ <td class="no"> &middot; <!-- 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"> &middot; <!-- File Upload -->
+ <td class="no"> &middot; <!-- Submit Button -->
+ <td class="no"> &middot; <!-- Image Button -->
+ <td class="no"> &middot; <!-- Reset Button -->
+<!-- <td class="no"> &middot; Button -->
+
+ <tr>
+ <th> <code title="event-input-change">change</code> event
+ <td class="no"> &middot; <!-- 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"> &middot; <!-- Submit Button -->
+ <td class="no"> &middot; <!-- Image Button -->
+ <td class="no"> &middot; <!-- Reset Button -->
+<!-- <td class="no"> &middot; Button -->
+
</table>
<p>When an <code>input</code> element's <code
@@ -26456,9 +26502,6 @@ function AddCloud(data, x, y) { ... }</pre>
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>
@@ -26518,6 +26561,9 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
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 @@ function AddCloud(data, x, y) { ... }</pre>
<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,6 +27935,9 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
@@ -27891,17 +27983,12 @@ function AddCloud(data, x, y) { ... }</pre>
<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 @@ function AddCloud(data, x, y) { ... }</pre>
</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 @@ function AddCloud(data, x, y) { ... }</pre>
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 @@ function AddCloud(data, x, y) { ... }</pre>
<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,6 +28059,9 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
+
@@ -28039,6 +28138,8 @@ function AddCloud(data, x, y) { ... }</pre>
<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,6 +28172,9 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
+
@@ -28090,12 +28194,11 @@ function AddCloud(data, x, y) { ... }</pre>
<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,6 +28243,10 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
@@ -28253,23 +28360,27 @@ function AddCloud(data, x, y) { ... }</pre>
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>
-
- <!-- XXX event timing; activation behavior -->
+ 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>
<p>The <dfn
title="concept-input-type-image-coordinate">selected
@@ -28329,6 +28440,10 @@ function AddCloud(data, x, y) { ... }</pre>
<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,12 +28467,10 @@ function AddCloud(data, x, y) { ... }</pre>
<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
- title="concept-form-reset">reset</span> the <span>form
- owner</span>.</p>
+ <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><strong>Constraint validation:</strong> The element is
<span>barred from constraint validation</span>.</p>
@@ -28396,6 +28509,10 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
@@ -28412,9 +28529,8 @@ function AddCloud(data, x, y) { ... }</pre>
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>
-
- <!-- XXX event timing; activation behavior -->
+ the user should allow the user to activate the element. The
+ element's <span>activation behavior</span> is to do nothing.</p>
<p><strong>Constraint validation:</strong> The element is
<span>barred from constraint validation</span>.</p>
@@ -28453,6 +28569,10 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
@@ -29025,6 +29145,55 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
@@ -43600,7 +43769,15 @@ at the first element with the given ID must be treated as if it was cloned and r
<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>

0 comments on commit 4edc6d4

Please sign in to comment.
Something went wrong with that request. Please try again.