[html5] r8367 - [giow] (2) Revamp 'input' and 'change' event logic for <input> elements. The pri [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Dec 18 16:03:55 PST 2013
Author: ianh
Date: 2013-12-18 16:03:53 -0800 (Wed, 18 Dec 2013)
New Revision: 8367
Modified:
complete.html
index
source
Log:
[giow] (2) Revamp 'input' and 'change' event logic for <input> elements. The primary goal here is to make 'input' events fire on type=checkbox, type=radio, and type=file, but this also improves the way other things here are phrased.
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=23449
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2013-12-18 19:30:46 UTC (rev 8366)
+++ complete.html 2013-12-19 00:03:53 UTC (rev 8367)
@@ -298,7 +298,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 18 December 2013</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 19 December 2013</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -39410,9 +39410,9 @@
<td class=yes> Yes <!-- Number -->
<td class=yes> Yes <!-- Range -->
<td class=yes> Yes <!-- Color -->
- <td class=no> · <!-- Checkbox -->
-<!-- <td class="no"> · Radio Button -->
- <td class=no> · <!-- File Upload -->
+ <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 -->
@@ -41770,13 +41770,14 @@
<div class=impl>
+<!--CLEANUP-->
<p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-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 its opposite value (i.e. true if it is false,
false if it is true), and of setting the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute to false. 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>
and the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute back to
the values they 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> that bubbles named <code title=event-change>change</code> at the element. <!-- It's not cancelable. Once this fires, the
+ <a href=#activation-behavior>activation behavior</a> is to <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-input>input</code> at the element and then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change>change</code> at the element. <!-- It's not cancelable. Once this fires, the
control is checked, end of story. --></p>
<p>If the element is not <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, it has no <a href=#activation-behavior>activation
@@ -41807,7 +41808,7 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL 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 <a href=#concept-input-apply title=concept-input-apply>applies</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 <a href=#concept-input-apply title=concept-input-apply>apply</a>.</p>
<p>The following content attributes must not be specified and <a href=#do-not-apply>do not apply</a> to the
element:
@@ -41850,9 +41851,6 @@
<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> event <a href=#do-not-apply title="do not
- apply">does not apply</a>.</p>
-
</div>
@@ -41905,10 +41903,10 @@
<li>The element's <a href=#form-owner>form owner</a> changes.</li>
- </ul><p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, then: The <a href=#pre-click-activation-steps>pre-click
+ </ul><!--CLEANUP--><p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-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> that bubbles named <code title=event-change>change</code> at the element. <!-- It's not cancelable. Once this fires, the
+ <a href=#activation-behavior>activation behavior</a> is to <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-input>input</code> at the element and then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change>change</code> at the element. <!-- It's not cancelable. Once this fires, the
control is checked, end of story. -->.</p>
<p>If the element is not <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, it has no <a href=#activation-behavior>activation
@@ -41934,7 +41932,7 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL 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 <a href=#concept-input-apply title=concept-input-apply>applies</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 <a href=#concept-input-apply title=concept-input-apply>apply</a>.</p>
<p>The following content attributes must not be specified and <a href=#do-not-apply>do not apply</a> to the
element:
@@ -41977,9 +41975,6 @@
<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> event <a href=#do-not-apply title="do not
- apply">does not apply</a>.</p>
-
</div>
@@ -42008,26 +42003,46 @@
entire directory hierarchy or multiple files with the same name from different directories. Path
components are those separated by U+005C REVERSE SOLIDUS character (\) characters.</p>
- <p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, the user agent should allow the
- user to change the files on the list, e.g. adding or removing files. Files can be from the
- filesystem or created on the fly, e.g. a picture taken from a camera connected to the user's
- device.</p>
+ <p>Unless the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is set, there must be
+ no more than one file in the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected
+ files</a>.</p>
<p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, then the element's
- <a href=#activation-behavior>activation behavior</a> is as follows: if the algorithm is <a href=#allowed-to-show-a-popup>allowed to show a
- popup</a>, then asynchronously display prompt to the user requesting that the user specify the
- <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>; otherwise, do nothing.</p>
+ <a href=#activation-behavior>activation behavior</a> is to run the following steps:</p>
+ <ol><li><p>If the algorithm is not <a href=#allowed-to-show-a-popup>allowed to show a popup</a>, then abort these steps
+ without doing anything else.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p>Optionally, wait until any prior execution of this algorithm has terminated.</p>
+
+ <li><p>Display a prompt to the user requesting that the user specify some files. If the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is not set, there must be no more than one
+ file selected; otherwise, any number may be selected. Files can be from the filesystem or created
+ on the fly, e.g. a picture taken from a camera connected to the user's device.</p>
+
+ <li><p>Wait for the user to have made their selection.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to first update the element's <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> so that it represents the user's
+ selection, then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element, and finally <a href=#fire-a-simple-event>fire a
+ simple event</a> that bubbles named <code title=event-change>change</code> at the
+ <code><a href=#the-input-element>input</a></code> element.</li>
+
+ </ol><p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, the user agent should allow the
+ user to change the files on the list in other ways also, e.g. adding or removing files by
+ drag-and-drop. When the user does so, the user agent must <a href=#queue-a-task>queue a task</a> to first
+ update the element's <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> so that
+ it represents the user's new selection, then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named
+ <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element, and finally <a href=#fire-a-simple-event>fire
+ a simple event</a> that bubbles named <code title=event-change>change</code> at the
+ <code><a href=#the-input-element>input</a></code> element.</p>
+
<p>If the element is not <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, it has no <a href=#activation-behavior>activation
- behavior</a>.</p>
+ behavior</a> and the user agent must not allow the user to change the element's selection.</p>
<p><strong>Constraint validation</strong>: If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> is empty, then the element is
<a href=#suffering-from-being-missing>suffering from being missing</a>.</p>
- <p>Unless the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is set, there must be no
- more than one file in the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected
- files</a>.</p>
-
</div>
<hr><p>The <dfn id=attr-input-accept title=attr-input-accept><code>accept</code></dfn> attribute may be specified to
@@ -42152,7 +42167,7 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-filename title=dom-input-value-filename>filename</a>.</p>
- <p>The <code title=event-input-change><a href=#event-input-change>change</a></code> event <a href=#concept-input-apply title=concept-input-apply>applies</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 <a href=#concept-input-apply title=concept-input-apply>apply</a>.</p>
<p>The following content attributes must not be specified and <a href=#do-not-apply>do not apply</a> to the
element:
@@ -42196,9 +42211,6 @@
<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> event <a href=#do-not-apply title="do not
- apply">does not apply</a>.</p>
-
</div>
@@ -43659,53 +43671,83 @@
<h5 id=common-input-element-events><span class=secno>4.10.5.5 </span>Common event behaviors</h5>
- <p>When the <dfn id=event-input-input title=event-input-input><code>input</code></dfn> event <a href=#concept-input-apply title=concept-input-apply>applies</a>, any time the user causes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to change, 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> that bubbles named <code title=event-input>input</code> at the
- <code><a href=#the-input-element>input</a></code> element. 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> <!-- same text is present in the <textarea> section -->
+ <p>When the <code title=event-input>input</code> and <code title=event-change>change</code>
+ events <a href=#concept-input-apply title=concept-input-apply>apply</a> (which is the case for all
+ <code><a href=#the-input-element>input</a></code> controls other than <a href=#concept-button title=concept-button>buttons</a> and those with
+ the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state), the events are fired to indicate that the
+ user has interacted with the control. The <dfn id=event-input-input title=event-input-input><code>input</code></dfn>
+ event fires whenever the user has modified the data of the control. The <dfn id=event-input-change title=event-input-change><code>change</code></dfn> event fires when the value is committed, if
+ that makes sense for the control, or else when the control loses focus. In all cases, the <code title=event-input>input</code> event comes before the corresponding <code title=event-change>change</code> event (if any).</p>
- <p class=example>Examples of a user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> would include the user typing into a text field, pasting a
- new value into the field, or undoing an edit in that field. Some user interactions do not cause
- changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text
- in the field with text from the clipboard that happens to be exactly the same text.</p>
+ <p>When an <code><a href=#the-input-element>input</a></code> element has a defined <a href=#activation-behavior>activation behavior</a>, the rules
+ for dispatching these events, if they <a href=#concept-input-apply title=concept-input-apply>apply</a>, are given
+ in the section above that defines the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's
+ state. (This is the case for all <code><a href=#the-input-element>input</a></code> controls with the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#checkbox-state-(type=checkbox)" title=attr-input-type-checkbox>Checkbox</a> state, the <a href="#radio-button-state-(type=radio)" title=attr-input-type-radio>Radio Button</a> state, or the <a href="#file-upload-state-(type=file)" title=attr-input-type-file>File Upload</a> state.)</p>
- <p>When the <dfn id=event-input-change title=event-input-change><code>change</code></dfn> event <a href=#concept-input-apply title=concept-input-apply>applies</a>, 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
- any time the user 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>, 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> that bubbles named <code title=event-change>change</code> at the <code><a href=#the-input-element>input</a></code> element.</p>
+ <p>For <code><a href=#the-input-element>input</a></code> elements without a defined <a href=#activation-behavior>activation behavior</a>, but to
+ which these events <a href=#concept-input-apply title=concept-input-apply>apply</a>, and for which the user
+ interface involves both interactive manipulation and an explicit commit action, then when the user
+ changes the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, 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> that bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element, and any time the user commits
+ the change, 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> that
+ bubbles named <code title=event-change>change</code> at the <code><a href=#the-input-element>input</a></code> element.</p>
- <p class=example>An example of a user interface with a commit action would be a <a href="#file-upload-state-(type=file)" 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 committed a new <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>file selection</a>.</p>
+ <p class=example>An example of a user interface involving both interactive manipulation and a
+ commit action would be a <a href="#range-state-(type=range)" title=attr-input-type-range>Range</a> controls that use a
+ slider, when manipulated using a pointing device. While the user is dragging the control's knob,
+ <code title=event-input>input</code> events would fire whenever the position changed, whereas
+ the <code title=event-change>change</code> event would only fire when the user let go of the
+ knob, committing to a specific value.</p>
+ <p>For <code><a href=#the-input-element>input</a></code> elements without a defined <a href=#activation-behavior>activation behavior</a>, but to
+ which these events <a href=#concept-input-apply title=concept-input-apply>apply</a>, and for which the user
+ interface involves an explicit commit action but no intermediate manipulation, then any time the
+ user commits a change to the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, the user
+ agent must <a href=#queue-a-task>queue a task</a> to first <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named
+ <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element, and then <a href=#fire-a-simple-event>fire a
+ simple event</a> that bubbles named <code title=event-change>change</code> at the
+ <code><a href=#the-input-element>input</a></code> element.</p>
+
+ <p class=example>An example of a user interface with a commit action would be a <a href="#color-state-(type=color)" title=attr-input-type-color>Color</a> control that consists of a single button that brings
+ up a color wheel: if the <a href=#concept-fe-value title=concept-fe-value>value</a> only changes when the dialog
+ is closed, then that would be the explicit commit action. On the other hand, if the control can be
+ focused and manipulating the control changes the color interactively, then there might be no
+ commit action.</p>
+
<p class=example>Another example of a user interface with a commit action would be a <a href="#date-state-(type=date)" 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 class=example>A third example of a user interface with a commit action would be a <a href="#range-state-(type=range)" title=attr-input-type-range>Range</a> controls that use a slider. While the user is dragging
- the control's knob, <code title=event-input>input</code> events would fire whenever the position
- changed, whereas the <code title=event-change>change</code> event would only fire when the user
- let go of the knob, committing to a specific value.</p>
+ <p>For <code><a href=#the-input-element>input</a></code> elements without a defined <a href=#activation-behavior>activation behavior</a>, but to
+ which these events <a href=#concept-input-apply title=concept-input-apply>apply</a>, any time the user causes the
+ element's <a href=#concept-fe-value title=concept-fe-value>value</a> to change without an explicit commit
+ action, 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> that
+ bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element. The
+ corresponding <code title=event-change>change</code> event, if any, will be fired when the
+ control <a href=#unfocusing-steps title="unfocusing steps">loses focus</a>.</p>
- <p>When the user agent changes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> on behalf
- of the user (e.g. as part of a form prefilling feature), the user agent must follow these
- steps:</p>
+ <p class=example>Examples of a user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> would include the user typing into a text field, pasting a
+ new value into the field, or undoing an edit in that field. Some user interactions do not cause
+ changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text
+ in the field with text from the clipboard that happens to be exactly the same text.</p>
- <ol><li>If the <code title=event-input-input><a href=#event-input-input>input</a></code> event <a href=#concept-input-apply title=concept-input-apply>applies</a>, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
- event</a> that bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code>
- element.</li>
+ <p class=example>A <a href="#range-state-(type=range)" title=attr-input-type-range>Range</a> control in the form of a
+ slider that the user has focused and is interacting with using a keyboard would be another example
+ of the user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> without a commit
+ step.</p>
- <li>If the <code title=event-input-change><a href=#event-input-change>change</a></code> event <a href=#concept-input-apply title=concept-input-apply>applies</a>, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
- event</a> that bubbles named <code title=event-change>change</code> at the
- <code><a href=#the-input-element>input</a></code> element.</li>
+ <p>In the case of <a href=#concept-task title=concept-task>tasks</a> that just fire an <code title=event-input>input</code> event, user agents may wait for a suitable break in the user's
+ interaction before <a href=#queue-a-task title="queue a task">queuing</a> the tasks; 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. <!-- similar text is present in the
+ <textarea> section -->
- </ol><p class=note>In addition, when the <code title=event-input-change><a href=#event-input-change>change</a></code> event <a href=#concept-input-apply title=concept-input-apply>applies</a>, <code title=event-change>change</code> events can
- also be fired as part of the element's <a href=#activation-behavior>activation behavior</a> and as part of the
- <a href=#unfocusing-steps>unfocusing steps</a>.</p>
+ <p>When the user agent is to change an <code><a href=#the-input-element>input</a></code> element's <a href=#concept-fe-value title=concept-fe-value>value</a> on behalf of the user (e.g. as part of a form prefilling
+ feature), the user agent must <a href=#queue-a-task>queue a task</a> to first update the <a href=#concept-fe-value title=concept-fe-value>value</a> accordingly, then <a href=#fire-a-simple-event>fire a simple event</a> that
+ bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element, then
+ <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change>change</code> at
+ the <code><a href=#the-input-element>input</a></code> element.
<p class=note>These events are not fired in response to changes made to the values of form
controls by scripts. (This is to make it easier to update the values of form controls in response
Modified: index
===================================================================
--- index 2013-12-18 19:30:46 UTC (rev 8366)
+++ index 2013-12-19 00:03:53 UTC (rev 8367)
@@ -298,7 +298,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 18 December 2013</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 19 December 2013</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -39410,9 +39410,9 @@
<td class=yes> Yes <!-- Number -->
<td class=yes> Yes <!-- Range -->
<td class=yes> Yes <!-- Color -->
- <td class=no> · <!-- Checkbox -->
-<!-- <td class="no"> · Radio Button -->
- <td class=no> · <!-- File Upload -->
+ <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 -->
@@ -41770,13 +41770,14 @@
<div class=impl>
+<!--CLEANUP-->
<p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-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 its opposite value (i.e. true if it is false,
false if it is true), and of setting the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute to false. 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>
and the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute back to
the values they 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> that bubbles named <code title=event-change>change</code> at the element. <!-- It's not cancelable. Once this fires, the
+ <a href=#activation-behavior>activation behavior</a> is to <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-input>input</code> at the element and then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change>change</code> at the element. <!-- It's not cancelable. Once this fires, the
control is checked, end of story. --></p>
<p>If the element is not <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, it has no <a href=#activation-behavior>activation
@@ -41807,7 +41808,7 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL 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 <a href=#concept-input-apply title=concept-input-apply>applies</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 <a href=#concept-input-apply title=concept-input-apply>apply</a>.</p>
<p>The following content attributes must not be specified and <a href=#do-not-apply>do not apply</a> to the
element:
@@ -41850,9 +41851,6 @@
<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> event <a href=#do-not-apply title="do not
- apply">does not apply</a>.</p>
-
</div>
@@ -41905,10 +41903,10 @@
<li>The element's <a href=#form-owner>form owner</a> changes.</li>
- </ul><p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, then: The <a href=#pre-click-activation-steps>pre-click
+ </ul><!--CLEANUP--><p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-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> that bubbles named <code title=event-change>change</code> at the element. <!-- It's not cancelable. Once this fires, the
+ <a href=#activation-behavior>activation behavior</a> is to <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-input>input</code> at the element and then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change>change</code> at the element. <!-- It's not cancelable. Once this fires, the
control is checked, end of story. -->.</p>
<p>If the element is not <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, it has no <a href=#activation-behavior>activation
@@ -41934,7 +41932,7 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL 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 <a href=#concept-input-apply title=concept-input-apply>applies</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 <a href=#concept-input-apply title=concept-input-apply>apply</a>.</p>
<p>The following content attributes must not be specified and <a href=#do-not-apply>do not apply</a> to the
element:
@@ -41977,9 +41975,6 @@
<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> event <a href=#do-not-apply title="do not
- apply">does not apply</a>.</p>
-
</div>
@@ -42008,26 +42003,46 @@
entire directory hierarchy or multiple files with the same name from different directories. Path
components are those separated by U+005C REVERSE SOLIDUS character (\) characters.</p>
- <p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, the user agent should allow the
- user to change the files on the list, e.g. adding or removing files. Files can be from the
- filesystem or created on the fly, e.g. a picture taken from a camera connected to the user's
- device.</p>
+ <p>Unless the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is set, there must be
+ no more than one file in the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected
+ files</a>.</p>
<p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, then the element's
- <a href=#activation-behavior>activation behavior</a> is as follows: if the algorithm is <a href=#allowed-to-show-a-popup>allowed to show a
- popup</a>, then asynchronously display prompt to the user requesting that the user specify the
- <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>; otherwise, do nothing.</p>
+ <a href=#activation-behavior>activation behavior</a> is to run the following steps:</p>
+ <ol><li><p>If the algorithm is not <a href=#allowed-to-show-a-popup>allowed to show a popup</a>, then abort these steps
+ without doing anything else.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p>Optionally, wait until any prior execution of this algorithm has terminated.</p>
+
+ <li><p>Display a prompt to the user requesting that the user specify some files. If the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is not set, there must be no more than one
+ file selected; otherwise, any number may be selected. Files can be from the filesystem or created
+ on the fly, e.g. a picture taken from a camera connected to the user's device.</p>
+
+ <li><p>Wait for the user to have made their selection.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to first update the element's <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> so that it represents the user's
+ selection, then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element, and finally <a href=#fire-a-simple-event>fire a
+ simple event</a> that bubbles named <code title=event-change>change</code> at the
+ <code><a href=#the-input-element>input</a></code> element.</li>
+
+ </ol><p>If the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, the user agent should allow the
+ user to change the files on the list in other ways also, e.g. adding or removing files by
+ drag-and-drop. When the user does so, the user agent must <a href=#queue-a-task>queue a task</a> to first
+ update the element's <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> so that
+ it represents the user's new selection, then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named
+ <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element, and finally <a href=#fire-a-simple-event>fire
+ a simple event</a> that bubbles named <code title=event-change>change</code> at the
+ <code><a href=#the-input-element>input</a></code> element.</p>
+
<p>If the element is not <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>, it has no <a href=#activation-behavior>activation
- behavior</a>.</p>
+ behavior</a> and the user agent must not allow the user to change the element's selection.</p>
<p><strong>Constraint validation</strong>: If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> is empty, then the element is
<a href=#suffering-from-being-missing>suffering from being missing</a>.</p>
- <p>Unless the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is set, there must be no
- more than one file in the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected
- files</a>.</p>
-
</div>
<hr><p>The <dfn id=attr-input-accept title=attr-input-accept><code>accept</code></dfn> attribute may be specified to
@@ -42152,7 +42167,7 @@
<p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-filename title=dom-input-value-filename>filename</a>.</p>
- <p>The <code title=event-input-change><a href=#event-input-change>change</a></code> event <a href=#concept-input-apply title=concept-input-apply>applies</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 <a href=#concept-input-apply title=concept-input-apply>apply</a>.</p>
<p>The following content attributes must not be specified and <a href=#do-not-apply>do not apply</a> to the
element:
@@ -42196,9 +42211,6 @@
<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> event <a href=#do-not-apply title="do not
- apply">does not apply</a>.</p>
-
</div>
@@ -43659,53 +43671,83 @@
<h5 id=common-input-element-events><span class=secno>4.10.5.5 </span>Common event behaviors</h5>
- <p>When the <dfn id=event-input-input title=event-input-input><code>input</code></dfn> event <a href=#concept-input-apply title=concept-input-apply>applies</a>, any time the user causes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to change, 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> that bubbles named <code title=event-input>input</code> at the
- <code><a href=#the-input-element>input</a></code> element. 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> <!-- same text is present in the <textarea> section -->
+ <p>When the <code title=event-input>input</code> and <code title=event-change>change</code>
+ events <a href=#concept-input-apply title=concept-input-apply>apply</a> (which is the case for all
+ <code><a href=#the-input-element>input</a></code> controls other than <a href=#concept-button title=concept-button>buttons</a> and those with
+ the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state), the events are fired to indicate that the
+ user has interacted with the control. The <dfn id=event-input-input title=event-input-input><code>input</code></dfn>
+ event fires whenever the user has modified the data of the control. The <dfn id=event-input-change title=event-input-change><code>change</code></dfn> event fires when the value is committed, if
+ that makes sense for the control, or else when the control loses focus. In all cases, the <code title=event-input>input</code> event comes before the corresponding <code title=event-change>change</code> event (if any).</p>
- <p class=example>Examples of a user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> would include the user typing into a text field, pasting a
- new value into the field, or undoing an edit in that field. Some user interactions do not cause
- changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text
- in the field with text from the clipboard that happens to be exactly the same text.</p>
+ <p>When an <code><a href=#the-input-element>input</a></code> element has a defined <a href=#activation-behavior>activation behavior</a>, the rules
+ for dispatching these events, if they <a href=#concept-input-apply title=concept-input-apply>apply</a>, are given
+ in the section above that defines the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's
+ state. (This is the case for all <code><a href=#the-input-element>input</a></code> controls with the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#checkbox-state-(type=checkbox)" title=attr-input-type-checkbox>Checkbox</a> state, the <a href="#radio-button-state-(type=radio)" title=attr-input-type-radio>Radio Button</a> state, or the <a href="#file-upload-state-(type=file)" title=attr-input-type-file>File Upload</a> state.)</p>
- <p>When the <dfn id=event-input-change title=event-input-change><code>change</code></dfn> event <a href=#concept-input-apply title=concept-input-apply>applies</a>, 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
- any time the user 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>, 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> that bubbles named <code title=event-change>change</code> at the <code><a href=#the-input-element>input</a></code> element.</p>
+ <p>For <code><a href=#the-input-element>input</a></code> elements without a defined <a href=#activation-behavior>activation behavior</a>, but to
+ which these events <a href=#concept-input-apply title=concept-input-apply>apply</a>, and for which the user
+ interface involves both interactive manipulation and an explicit commit action, then when the user
+ changes the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, 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> that bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element, and any time the user commits
+ the change, 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> that
+ bubbles named <code title=event-change>change</code> at the <code><a href=#the-input-element>input</a></code> element.</p>
- <p class=example>An example of a user interface with a commit action would be a <a href="#file-upload-state-(type=file)" 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 committed a new <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>file selection</a>.</p>
+ <p class=example>An example of a user interface involving both interactive manipulation and a
+ commit action would be a <a href="#range-state-(type=range)" title=attr-input-type-range>Range</a> controls that use a
+ slider, when manipulated using a pointing device. While the user is dragging the control's knob,
+ <code title=event-input>input</code> events would fire whenever the position changed, whereas
+ the <code title=event-change>change</code> event would only fire when the user let go of the
+ knob, committing to a specific value.</p>
+ <p>For <code><a href=#the-input-element>input</a></code> elements without a defined <a href=#activation-behavior>activation behavior</a>, but to
+ which these events <a href=#concept-input-apply title=concept-input-apply>apply</a>, and for which the user
+ interface involves an explicit commit action but no intermediate manipulation, then any time the
+ user commits a change to the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, the user
+ agent must <a href=#queue-a-task>queue a task</a> to first <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named
+ <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element, and then <a href=#fire-a-simple-event>fire a
+ simple event</a> that bubbles named <code title=event-change>change</code> at the
+ <code><a href=#the-input-element>input</a></code> element.</p>
+
+ <p class=example>An example of a user interface with a commit action would be a <a href="#color-state-(type=color)" title=attr-input-type-color>Color</a> control that consists of a single button that brings
+ up a color wheel: if the <a href=#concept-fe-value title=concept-fe-value>value</a> only changes when the dialog
+ is closed, then that would be the explicit commit action. On the other hand, if the control can be
+ focused and manipulating the control changes the color interactively, then there might be no
+ commit action.</p>
+
<p class=example>Another example of a user interface with a commit action would be a <a href="#date-state-(type=date)" 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 class=example>A third example of a user interface with a commit action would be a <a href="#range-state-(type=range)" title=attr-input-type-range>Range</a> controls that use a slider. While the user is dragging
- the control's knob, <code title=event-input>input</code> events would fire whenever the position
- changed, whereas the <code title=event-change>change</code> event would only fire when the user
- let go of the knob, committing to a specific value.</p>
+ <p>For <code><a href=#the-input-element>input</a></code> elements without a defined <a href=#activation-behavior>activation behavior</a>, but to
+ which these events <a href=#concept-input-apply title=concept-input-apply>apply</a>, any time the user causes the
+ element's <a href=#concept-fe-value title=concept-fe-value>value</a> to change without an explicit commit
+ action, 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> that
+ bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element. The
+ corresponding <code title=event-change>change</code> event, if any, will be fired when the
+ control <a href=#unfocusing-steps title="unfocusing steps">loses focus</a>.</p>
- <p>When the user agent changes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> on behalf
- of the user (e.g. as part of a form prefilling feature), the user agent must follow these
- steps:</p>
+ <p class=example>Examples of a user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> would include the user typing into a text field, pasting a
+ new value into the field, or undoing an edit in that field. Some user interactions do not cause
+ changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text
+ in the field with text from the clipboard that happens to be exactly the same text.</p>
- <ol><li>If the <code title=event-input-input><a href=#event-input-input>input</a></code> event <a href=#concept-input-apply title=concept-input-apply>applies</a>, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
- event</a> that bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code>
- element.</li>
+ <p class=example>A <a href="#range-state-(type=range)" title=attr-input-type-range>Range</a> control in the form of a
+ slider that the user has focused and is interacting with using a keyboard would be another example
+ of the user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> without a commit
+ step.</p>
- <li>If the <code title=event-input-change><a href=#event-input-change>change</a></code> event <a href=#concept-input-apply title=concept-input-apply>applies</a>, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
- event</a> that bubbles named <code title=event-change>change</code> at the
- <code><a href=#the-input-element>input</a></code> element.</li>
+ <p>In the case of <a href=#concept-task title=concept-task>tasks</a> that just fire an <code title=event-input>input</code> event, user agents may wait for a suitable break in the user's
+ interaction before <a href=#queue-a-task title="queue a task">queuing</a> the tasks; 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. <!-- similar text is present in the
+ <textarea> section -->
- </ol><p class=note>In addition, when the <code title=event-input-change><a href=#event-input-change>change</a></code> event <a href=#concept-input-apply title=concept-input-apply>applies</a>, <code title=event-change>change</code> events can
- also be fired as part of the element's <a href=#activation-behavior>activation behavior</a> and as part of the
- <a href=#unfocusing-steps>unfocusing steps</a>.</p>
+ <p>When the user agent is to change an <code><a href=#the-input-element>input</a></code> element's <a href=#concept-fe-value title=concept-fe-value>value</a> on behalf of the user (e.g. as part of a form prefilling
+ feature), the user agent must <a href=#queue-a-task>queue a task</a> to first update the <a href=#concept-fe-value title=concept-fe-value>value</a> accordingly, then <a href=#fire-a-simple-event>fire a simple event</a> that
+ bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element, then
+ <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change>change</code> at
+ the <code><a href=#the-input-element>input</a></code> element.
<p class=note>These events are not fired in response to changes made to the values of form
controls by scripts. (This is to make it easier to update the values of form controls in response
Modified: source
===================================================================
--- source 2013-12-18 19:30:46 UTC (rev 8366)
+++ source 2013-12-19 00:03:53 UTC (rev 8367)
@@ -42963,9 +42963,9 @@
<td class="yes"> Yes <!-- Number -->
<td class="yes"> Yes <!-- Range -->
<td class="yes"> Yes <!-- Color -->
- <td class="no"> · <!-- Checkbox -->
-<!-- <td class="no"> · Radio Button -->
- <td class="no"> · <!-- File Upload -->
+ <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 -->
@@ -45575,6 +45575,7 @@
<div class="impl">
+<!--CLEANUP-->
<p>If the element is <i data-x="concept-fe-mutable">mutable</i>, then: The <span>pre-click
activation steps</span> consist of setting the element's <span
data-x="concept-fe-checked">checkedness</span> to its opposite value (i.e. true if it is false,
@@ -45584,6 +45585,7 @@
and the element's <code data-x="dom-input-indeterminate">indeterminate</code> IDL attribute back to
the values they had before the <span>pre-click activation steps</span> were run. The
<span>activation behavior</span> is to <span>fire a simple event</span> that bubbles named <code
+ data-x="event-input">input</code> at the element and then <span>fire a simple event</span> that bubbles named <code
data-x="event-change">change</code> at the element. <!-- It's not cancelable. Once this fires, the
control is checked, end of story. --></p>
@@ -45624,8 +45626,9 @@
<p>The <code data-x="dom-input-value">value</code> IDL attribute is in mode <span
data-x="dom-input-value-default-on">default/on</span>.</p>
- <p>The <code data-x="event-input-change">change</code> event <span
- data-x="concept-input-apply">applies</span>.</p>
+ <p>The <code data-x="event-input-input">input</code> and <code
+ data-x="event-input-change">change</code> events <span
+ data-x="concept-input-apply">apply</span>.</p>
<p>The following content attributes must not be specified and <span>do not apply</span> to the
element:
@@ -45668,9 +45671,6 @@
<code class="no-backref" data-x="dom-input-stepDown">stepDown()</code>, and
<code class="no-backref" data-x="dom-input-stepUp">stepUp()</code> methods.</p>
- <p>The <code class="no-backref" data-x="event-input-input">input</code> event <span data-x="do not
- apply">does not apply</span>.</p>
-
</div>
@@ -45738,11 +45738,13 @@
</ul>
+<!--CLEANUP-->
<p>If the element is <i data-x="concept-fe-mutable">mutable</i>, then: The <span>pre-click
activation steps</span> consist of setting the element's <span
data-x="concept-fe-checked">checkedness</span> to true. The <span>canceled activation steps</span>
consist of setting the element's <span data-x="concept-fe-checked">checkedness</span> to false. The
<span>activation behavior</span> is to <span>fire a simple event</span> that bubbles named <code
+ data-x="event-input">input</code> at the element and then <span>fire a simple event</span> that bubbles named <code
data-x="event-change">change</code> at the element. <!-- It's not cancelable. Once this fires, the
control is checked, end of story. -->.</p>
@@ -45772,8 +45774,9 @@
<p>The <code data-x="dom-input-value">value</code> IDL attribute is in mode <span
data-x="dom-input-value-default-on">default/on</span>.</p>
- <p>The <code data-x="event-input-change">change</code> event <span
- data-x="concept-input-apply">applies</span>.</p>
+ <p>The <code data-x="event-input-input">input</code> and <code
+ data-x="event-input-change">change</code> events <span
+ data-x="concept-input-apply">apply</span>.</p>
<p>The following content attributes must not be specified and <span>do not apply</span> to the
element:
@@ -45816,9 +45819,6 @@
<code class="no-backref" data-x="dom-input-stepDown">stepDown()</code>, and
<code class="no-backref" data-x="dom-input-stepUp">stepUp()</code> methods.</p>
- <p>The <code class="no-backref" data-x="event-input-input">input</code> event <span data-x="do not
- apply">does not apply</span>.</p>
-
</div>
@@ -45848,28 +45848,55 @@
entire directory hierarchy or multiple files with the same name from different directories. Path
components are those separated by U+005C REVERSE SOLIDUS character (\) characters.</p>
- <p>If the element is <i data-x="concept-fe-mutable">mutable</i>, the user agent should allow the
- user to change the files on the list, e.g. adding or removing files. Files can be from the
- filesystem or created on the fly, e.g. a picture taken from a camera connected to the user's
- device.</p>
+ <p>Unless the <code data-x="attr-input-multiple">multiple</code> attribute is set, there must be
+ no more than one file in the list of <span data-x="concept-input-type-file-selected">selected
+ files</span>.</p>
<p>If the element is <i data-x="concept-fe-mutable">mutable</i>, then the element's
- <span>activation behavior</span> is as follows: if the algorithm is <span>allowed to show a
- popup</span>, then asynchronously display prompt to the user requesting that the user specify the
- <span data-x="concept-input-type-file-selected">selected files</span>; otherwise, do nothing.</p>
+ <span>activation behavior</span> is to run the following steps:</p>
+ <ol>
+
+ <li><p>If the algorithm is not <span>allowed to show a popup</span>, then abort these steps
+ without doing anything else.</p></li>
+
+ <li><p>Return, but continue running these steps asynchronously.</p></li>
+
+ <li><p>Optionally, wait until any prior execution of this algorithm has terminated.</p>
+
+ <li><p>Display a prompt to the user requesting that the user specify some files. If the <code
+ data-x="attr-input-multiple">multiple</code> attribute is not set, there must be no more than one
+ file selected; otherwise, any number may be selected. Files can be from the filesystem or created
+ on the fly, e.g. a picture taken from a camera connected to the user's device.</p>
+
+ <li><p>Wait for the user to have made their selection.</p></li>
+
+ <li><p><span>Queue a task</span> to first update the element's <span
+ data-x="concept-input-type-file-selected">selected files</span> so that it represents the user's
+ selection, then <span>fire a simple event</span> that bubbles named <code
+ data-x="event-input">input</code> at the <code>input</code> element, and finally <span>fire a
+ simple event</span> that bubbles named <code data-x="event-change">change</code> at the
+ <code>input</code> element.</p></li>
+
+ </ol>
+
+ <p>If the element is <i data-x="concept-fe-mutable">mutable</i>, the user agent should allow the
+ user to change the files on the list in other ways also, e.g. adding or removing files by
+ drag-and-drop. When the user does so, the user agent must <span>queue a task</span> to first
+ update the element's <span data-x="concept-input-type-file-selected">selected files</span> so that
+ it represents the user's new selection, then <span>fire a simple event</span> that bubbles named
+ <code data-x="event-input">input</code> at the <code>input</code> element, and finally <span>fire
+ a simple event</span> that bubbles named <code data-x="event-change">change</code> at the
+ <code>input</code> element.</p>
+
<p>If the element is not <i data-x="concept-fe-mutable">mutable</i>, it has no <span>activation
- behavior</span>.</p>
+ behavior</span> and the user agent must not allow the user to change the element's selection.</p>
<p><strong>Constraint validation</strong>: If the element is <i
data-x="concept-input-required">required</i> and the list of <span
data-x="concept-input-type-file-selected">selected files</span> is empty, then the element is
<span>suffering from being missing</span>.</p>
- <p>Unless the <code data-x="attr-input-multiple">multiple</code> attribute is set, there must be no
- more than one file in the list of <span data-x="concept-input-type-file-selected">selected
- files</span>.</p>
-
</div>
<hr>
@@ -46004,8 +46031,9 @@
<p>The <code data-x="dom-input-value">value</code> IDL attribute is in mode <span
data-x="dom-input-value-filename">filename</span>.</p>
- <p>The <code data-x="event-input-change">change</code> event <span
- data-x="concept-input-apply">applies</span>.</p>
+ <p>The <code data-x="event-input-input">input</code> and <code
+ data-x="event-input-change">change</code> events <span
+ data-x="concept-input-apply">apply</span>.</p>
<p>The following content attributes must not be specified and <span>do not apply</span> to the
element:
@@ -46049,9 +46077,6 @@
<code class="no-backref" data-x="dom-input-stepDown">stepDown()</code>, and
<code class="no-backref" data-x="dom-input-stepUp">stepUp()</code> methods.</p>
- <p>The <code class="no-backref" data-x="event-input-input">input</code> event <span data-x="do not
- apply">does not apply</span>.</p>
-
</div>
@@ -47747,34 +47772,58 @@
<h5 id="common-input-element-events">Common event behaviors</h5>
- <p>When the <dfn data-x="event-input-input"><code>input</code></dfn> event <span
- data-x="concept-input-apply">applies</span>, any time the user causes the element's <span
- data-x="concept-fe-value">value</span> to change, the user agent must <span>queue a task</span> to
- <span>fire a simple event</span> that bubbles named <code data-x="event-input">input</code> at the
- <code>input</code> element. 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> <!-- same text is present in the <textarea> section -->
+ <p>When the <code data-x="event-input">input</code> and <code data-x="event-change">change</code>
+ events <span data-x="concept-input-apply">apply</span> (which is the case for all
+ <code>input</code> controls other than <span data-x="concept-button">buttons</span> and those with
+ the <code data-x="attr-input-type">type</code> attribute in the <span
+ data-x="attr-input-type-hidden">Hidden</span> state), the events are fired to indicate that the
+ user has interacted with the control. The <dfn data-x="event-input-input"><code>input</code></dfn>
+ event fires whenever the user has modified the data of the control. The <dfn
+ data-x="event-input-change"><code>change</code></dfn> event fires when the value is committed, if
+ that makes sense for the control, or else when the control loses focus. In all cases, the <code
+ data-x="event-input">input</code> event comes before the corresponding <code
+ data-x="event-change">change</code> event (if any).</p>
- <p class="example">Examples of a user changing the element's <span
- data-x="concept-fe-value">value</span> would include the user typing into a text field, pasting a
- new value into the field, or undoing an edit in that field. Some user interactions do not cause
- changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text
- in the field with text from the clipboard that happens to be exactly the same text.</p>
+ <p>When an <code>input</code> element has a defined <span>activation behavior</span>, the rules
+ for dispatching these events, if they <span data-x="concept-input-apply">apply</span>, are given
+ in the section above that defines the <code data-x="attr-input-type">type</code> attribute's
+ state. (This is the case for all <code>input</code> controls with the <code
+ data-x="attr-input-type">type</code> attribute in the <span
+ data-x="attr-input-type-checkbox">Checkbox</span> state, the <span
+ data-x="attr-input-type-radio">Radio Button</span> state, or the <span
+ data-x="attr-input-type-file">File Upload</span> state.)</p>
- <p>When the <dfn data-x="event-input-change"><code>change</code></dfn> event <span
- data-x="concept-input-apply">applies</span>, if the element does not have an <span>activation
- behavior</span> defined but uses a user interface that involves an explicit commit action, then
- any time the user commits a change to the element's <span data-x="concept-fe-value">value</span> or
- list of <span data-x="concept-input-type-file-selected">selected files</span>, the user agent must
+ <p>For <code>input</code> elements without a defined <span>activation behavior</span>, but to
+ which these events <span data-x="concept-input-apply">apply</span>, and for which the user
+ interface involves both interactive manipulation and an explicit commit action, then when the user
+ changes the element's <span data-x="concept-fe-value">value</span>, the user agent must
<span>queue a task</span> to <span>fire a simple event</span> that bubbles named <code
- data-x="event-change">change</code> at the <code>input</code> element.</p>
+ data-x="event-input">input</code> at the <code>input</code> element, and any time the user commits
+ the change, the user agent must <span>queue a task</span> to <span>fire a simple event</span> that
+ bubbles named <code data-x="event-change">change</code> at the <code>input</code> element.</p>
+ <p class="example">An example of a user interface involving both interactive manipulation and a
+ commit action would be a <span data-x="attr-input-type-range">Range</span> controls that use a
+ slider, when manipulated using a pointing device. While the user is dragging the control's knob,
+ <code data-x="event-input">input</code> events would fire whenever the position changed, whereas
+ the <code data-x="event-change">change</code> event would only fire when the user let go of the
+ knob, committing to a specific value.</p>
+
+ <p>For <code>input</code> elements without a defined <span>activation behavior</span>, but to
+ which these events <span data-x="concept-input-apply">apply</span>, and for which the user
+ interface involves an explicit commit action but no intermediate manipulation, then any time the
+ user commits a change to the element's <span data-x="concept-fe-value">value</span>, the user
+ agent must <span>queue a task</span> to first <span>fire a simple event</span> that bubbles named
+ <code data-x="event-input">input</code> at the <code>input</code> element, and then <span>fire a
+ simple event</span> that bubbles named <code data-x="event-change">change</code> at the
+ <code>input</code> element.</p>
+
<p class="example">An example of a user interface with a commit action would be a <span
- data-x="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
- data-x="concept-input-type-file-selected">file selection</span> changed as a result, then the user
- has committed a new <span data-x="concept-input-type-file-selected">file selection</span>.</p>
+ data-x="attr-input-type-color">Color</span> control that consists of a single button that brings
+ up a color wheel: if the <span data-x="concept-fe-value">value</span> only changes when the dialog
+ is closed, then that would be the explicit commit action. On the other hand, if the control can be
+ focused and manipulating the control changes the color interactively, then there might be no
+ commit action.</p>
<p class="example">Another example of a user interface with a commit action would be a <span
data-x="attr-input-type-date">Date</span> control that allows both text-based user input and user
@@ -47782,35 +47831,40 @@
selecting a date from the drop down calendar and then dismissing the drop down would be a commit
action.</p>
- <p class="example">A third example of a user interface with a commit action would be a <span
- data-x="attr-input-type-range">Range</span> controls that use a slider. While the user is dragging
- the control's knob, <code data-x="event-input">input</code> events would fire whenever the position
- changed, whereas the <code data-x="event-change">change</code> event would only fire when the user
- let go of the knob, committing to a specific value.</p>
+ <p>For <code>input</code> elements without a defined <span>activation behavior</span>, but to
+ which these events <span data-x="concept-input-apply">apply</span>, any time the user causes the
+ element's <span data-x="concept-fe-value">value</span> to change without an explicit commit
+ action, the user agent must <span>queue a task</span> to <span>fire a simple event</span> that
+ bubbles named <code data-x="event-input">input</code> at the <code>input</code> element. The
+ corresponding <code data-x="event-change">change</code> event, if any, will be fired when the
+ control <span data-x="unfocusing steps">loses focus</span>.</p>
- <p>When the user agent changes the element's <span data-x="concept-fe-value">value</span> on behalf
- of the user (e.g. as part of a form prefilling feature), the user agent must follow these
- steps:</p>
+ <p class="example">Examples of a user changing the element's <span
+ data-x="concept-fe-value">value</span> would include the user typing into a text field, pasting a
+ new value into the field, or undoing an edit in that field. Some user interactions do not cause
+ changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text
+ in the field with text from the clipboard that happens to be exactly the same text.</p>
- <ol>
+ <p class="example">A <span data-x="attr-input-type-range">Range</span> control in the form of a
+ slider that the user has focused and is interacting with using a keyboard would be another example
+ of the user changing the element's <span data-x="concept-fe-value">value</span> without a commit
+ step.</p>
- <li>If the <code data-x="event-input-input">input</code> event <span
- data-x="concept-input-apply">applies</span>, <span>queue a task</span> to <span>fire a simple
- event</span> that bubbles named <code data-x="event-input">input</code> at the <code>input</code>
- element.</li>
+ <p>In the case of <span data-x="concept-task">tasks</span> that just fire an <code
+ data-x="event-input">input</code> event, user agents may wait for a suitable break in the user's
+ interaction before <span data-x="queue a task">queuing</span> the tasks; 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. <!-- similar text is present in the
+ <textarea> section -->
- <li>If the <code data-x="event-input-change">change</code> event <span
- data-x="concept-input-apply">applies</span>, <span>queue a task</span> to <span>fire a simple
- event</span> that bubbles named <code data-x="event-change">change</code> at the
- <code>input</code> element.</li>
+ <p>When the user agent is to change an <code>input</code> element's <span
+ data-x="concept-fe-value">value</span> on behalf of the user (e.g. as part of a form prefilling
+ feature), the user agent must <span>queue a task</span> to first update the <span
+ data-x="concept-fe-value">value</span> accordingly, then <span>fire a simple event</span> that
+ bubbles named <code data-x="event-input">input</code> at the <code>input</code> element, then
+ <span>fire a simple event</span> that bubbles named <code data-x="event-change">change</code> at
+ the <code>input</code> element.</li>
- </ol>
-
- <p class="note">In addition, when the <code data-x="event-input-change">change</code> event <span
- data-x="concept-input-apply">applies</span>, <code data-x="event-change">change</code> events can
- also be fired as part of the element's <span>activation behavior</span> and as part of the
- <span>unfocusing steps</span>.</p>
-
<p class="note">These events are not fired in response to changes made to the values of form
controls by scripts. (This is to make it easier to update the values of form controls in response
to the user manipulating the controls, without having to then filter out the script's own changes
More information about the Commit-Watchers
mailing list