mozilla

Revision 295003 of input

  • Revision slug: DOM/DOM_event_reference/input
  • Revision title: input
  • Revision id: 295003
  • Created:
  • Creator: openjck
  • Is current revision? No
  • Comment

Revision Content

The DOM input event is fired synchronously when the value of an {{ HTMLElement("input") }} or {{ HTMLElement("textarea") }} element is changed. Additionally, it's also fired on contenteditable editors when its contents are changed. In this case, the event target is the editing host element. If there are two or more elements which have contenteditable as true, "editing host" is the nearest ancestor element whose parent isn't editable. Similarly, it's also fired on root element of designMode editors.

  • Interface :{{ domxref('Event') }}
  • Synchronicity :synchronous
  • Bubbles : yes
  • Target : {{ domxref('Element') }}
  • Cancelable : no
  • Default action : none

Specification

HTML5

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
immediately after compositionupdate {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("12") }} {{ CompatVersionUnknown() }} {{ CompatNo() }} {{ CompatVersionUnknown() }}
on contenteditable element

{{ CompatVersionUnknown() }}

{{ CompatGeckoDesktop("14") }}

{{ CompatVersionUnknown() }}

Event target is the innermost element at caret position.

{{ CompatNo() }} {{ CompatVersionUnknown() }}
when designMode is "on"

{{ CompatVersionUnknown() }}

{{ CompatGeckoDesktop("14") }}

{{ CompatNo() }}

{{ CompatNo() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
immediately after compositionupdate {{ CompatUnknown() }} {{ CompatGeckoMobile("12") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
on contenteditable element {{ CompatUnknown() }}

{{ CompatGeckoMobile("14") }}

{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
when designMode is "on" {{ CompatUnknown() }} {{ CompatGeckoMobile("14") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Opera does not fire an input event after dropping text in an input field.
IE 9 does not fire an input event when the user removes characters from input filled by keyboard, cut, or drag operations.

Gecko notes

Prior to Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko didn't fire input events while composition was ongoing using IMEs or when dead keys were used on the Mac.

{{ languages( { "ja": "ja/DOM/DOM_event_reference/input" } ) }}

Revision Source

<p>The DOM <code>input</code> event is fired synchronously when the value of an {{ HTMLElement("input") }} or {{ HTMLElement("textarea") }} element is changed. Additionally, it's also fired on <a href="/en/DOM/Element.contentEditable" title="Element.contentEditable"><code>contenteditable</code></a> editors when its contents are changed. In this case, the event target is the editing host element. If there are two or more elements which have <code>contenteditable</code> as true, "editing host" is the nearest ancestor element whose parent isn't editable. Similarly, it's also fired on root element of <a href="/en/DOM/document.designMode" title="document.designMode"><code>designMode</code></a> editors.</p>
<ul style="display:table;padding: 0;border-left: 2px solid;margin-left:0.5em;">
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Interface :</dfn>{{ domxref('Event') }}</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Synchronicity :</dfn>synchronous</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Bubbles :</dfn> yes</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Target :</dfn> {{ domxref('Element') }}</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Cancelable :</dfn> no</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Default action :</dfn> none</li>
</ul>
<h2 id="Specification">Specification</h2>
<p><a class="external" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input" title="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input">HTML5</a></p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td>immediately after <code><a href="/en/DOM/DOM_event_reference/compositionupdate" title="en/DOM/DOM_event_reference/compositionupdate">compositionupdate</a></code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ <a href="Template:CompatGeckoDesktop" title="Template:CompatGeckoDesktop">CompatGeckoDesktop</a>("12") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td>on <a href="/en/DOM/Element.contentEditable" title="Element.contentEditable"><code>contenteditable</code></a> element</td>
        <td>
          <p>{{ CompatVersionUnknown() }}</p>
        </td>
        <td>{{ <a href="/Template:CompatGeckoDesktop" title="Template:CompatGeckoDesktop">CompatGeckoDesktop</a>("14") }}</td>
        <td>
          <p>{{ CompatVersionUnknown() }}</p>
          <p>Event target is the innermost element at caret position.</p>
        </td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td>when <a href="/en/DOM/document.designMode" title="document.designMode"><code>designMode</code></a> is "on"</td>
        <td>
          <p>{{ CompatVersionUnknown() }}</p>
        </td>
        <td>{{ <a href="/Template:CompatGeckoDesktop" title="Template:CompatGeckoDesktop">CompatGeckoDesktop</a>("14") }}</td>
        <td>
          <p>{{ CompatNo() }}</p>
        </td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>immediately after <code><a href="/en/DOM/DOM_event_reference/compositionupdate" title="en/DOM/DOM_event_reference/compositionupdate">compositionupdate</a></code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("12") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>on <a href="/en/DOM/Element.contentEditable" title="Element.contentEditable"><code>contenteditable</code></a> element</td>
        <td>{{ CompatUnknown() }}</td>
        <td>
          <p>{{ CompatGeckoMobile("14") }}</p>
        </td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>when <a href="/en/DOM/document.designMode" title="document.designMode"><code>designMode</code></a> is "on"</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("14") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div>
  Opera does not fire an input event after dropping text in an input field.</div>
<div>
  IE 9 does not fire an input event when the user removes characters from input filled by keyboard, cut, or drag operations.</div>
<h3 id="Gecko_notes">Gecko notes</h3>
<p>Prior to Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko didn't fire input events while composition was ongoing using IMEs or when dead keys were used on the Mac.</p>
<p>{{ languages( { "ja": "ja/DOM/DOM_event_reference/input" } ) }}</p>
Revert to this revision