change

  • Revision slug: Web/Reference/Events/change
  • Revision title: change
  • Revision id: 438137
  • Created:
  • Creator: Sebastianz
  • Is current revision? Yes
  • Comment Fixed little typo

Revision Content

The change event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user. Unlike the {{event("input")}} event, the change event is not necessarily fired for each change to an element's value.

General info

Specification
HTML5
Interface
{{domxref("Event")}}
Bubbles
Yes
Cancelable
No
Target
Element
Default Action
undefined

Properties

{{OpenEventProperties()}}{{CloseEventProperties()}}

Description

Depending on the kind of the form element being changed and the way the user interacts with the element, the change event fires at a different moment:

  • When the element is activated (by clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">;
  • When the user commits the change explicitly (e.g. by selecting a value from a {{HTMLElement("select")}}'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.);
  • When the element loses focus after its value was changed, but not commited (e.g. after editing the value of {{HTMLElement("textarea")}} or <input type="text">).

Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in {{HTMLElement("select")}} elements never fires a change event in Gecko until the user hits Enter or switches the focus away from the <select> (see {{bug("126379")}}).

The HTML specification lists the <input> types that should fire the change event.

Example

An incomplete example, which probably doesn't work on all browsers, on jsfiddle: http://jsfiddle.net/nfakc/5/.

See also

{{domxref("window.navigator.connection")}} fires the change event when the connection information changes.

Revision Source

<p>The <code>change</code> event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user. Unlike the {{event("input")}} event, the <code>change</code> event is not necessarily fired for each change to an element's <code>value</code>.</p>
<h2 id="General_info">General info</h2>
<dl>
  <dt style="float: left; text-align: right; width: 120px;">
    Specification</dt>
  <dd style="margin: 0 0 0 120px;">
    <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Interface</dt>
  <dd style="margin: 0 0 0 120px;">
    {{domxref("Event")}}</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Bubbles</dt>
  <dd style="margin: 0 0 0 120px;">
    Yes</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Cancelable</dt>
  <dd style="margin: 0 0 0 120px;">
    No</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Target</dt>
  <dd style="margin: 0 0 0 120px;">
    Element</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Default Action</dt>
  <dd style="margin: 0 0 0 120px;">
    undefined</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties()}}{{CloseEventProperties()}}</p>
<h2 id="Description">Description</h2>
<p>Depending on the kind of the form element being changed and the way the user interacts with the element, the <code>change</code> event fires at a different moment:</p>
<ul>
  <li>When the element is activated (by clicking or using the keyboard) for <code>&lt;input type="radio"&gt;</code> and <code>&lt;input type="checkbox"&gt;</code>;</li>
  <li>When the user commits the change explicitly (e.g. by selecting a value from a {{HTMLElement("select")}}'s dropdown with a mouse click, by selecting a date from a date picker for <code>&lt;input type="date"&gt;</code>, by selecting a file in the file picker for <code>&lt;input type="file"&gt;</code>, etc.);</li>
  <li>When the element loses focus after its value was changed, but not commited (e.g. after editing the value of {{HTMLElement("textarea")}} or <code>&lt;input type="text"&gt;</code>).</li>
</ul>
<p>Different browsers do not always agree whether a <code>change</code> event should be fired for certain types of interaction. For example, keyboard navigation in {{HTMLElement("select")}} elements never fires a <code>change</code> event in Gecko until the user hits Enter or switches the focus away from the <code>&lt;select&gt;</code> (see {{bug("126379")}}).</p>
<p>The HTML specification lists <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply">the <code>&lt;input&gt;</code> types that should fire the <code>change</code> event</a>.</p>
<h2 id="Example">Example</h2>
<p>An incomplete example, which probably doesn't work on all browsers, on jsfiddle: <a href="http://jsfiddle.net/nfakc/5/" title="http://jsfiddle.net/nfakc/5/">http://jsfiddle.net/nfakc/5/</a>.</p>
<h2 id="See_also">See also</h2>
<p>{{domxref("window.navigator.connection")}} fires the <code>change</code> event when the connection information changes.</p>
Revert to this revision