The input
event fires when the value
of an <input>
, <select>
, or <textarea>
element has been changed.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | InputEvent |
Event handler property | GlobalEventHandlers.oninput |
The event also applies to elements with contenteditable
enabled, and to any element when designMode
is turned on. In the case of contenteditable
and designMode
, the event target is the editing host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.
For <input>
elements with type=checkbox
or type=radio
, the input
event should fire whenever a user toggles the control, per the HTML5 specification. However, historically this has not always been the case. Check compatibility, or use the change
event instead for elements of these types.
Note: The input
event is fired every time the value
of the element changes. This is unlike the change
event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like.
Examples
This example logs the value whenever you change the value of the <input>
element.
HTML
<input placeholder="Enter some text" name="name"/> <p id="values"></p>
JavaScript
const input = document.querySelector('input'); const log = document.getElementById('values'); input.addEventListener('input', updateValue); function updateValue(e) { log.textContent = e.target.value; }
Result
Specifications
Specification | Status |
---|---|
HTML Living Standard The definition of 'input event' in that specification. |
Living Standard |
Document Object Model (DOM) Level 3 Events Specification The definition of 'input event' in that specification. |
Obsolete |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
input event | Chrome Full support 1 | Edge
Full support
79
| Firefox Full support 6 | IE
Partial support
9
| Opera Full support 11.6 | Safari Full support 3.1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 12 | Safari iOS Full support 2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- Partial support
- Partial support
- See implementation notes.
- See implementation notes.
See also
- Related events