input (event)
The input event fires when the value of an <input>, <select>, or <textarea> element has been changed as a direct result of a user action (such as typing in a textbox or checking a checkbox).
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 HTML Living Standard specification. However, historically this has not always been the case. Check compatibility, or use the change event instead for elements of these types.
For <textarea> and <input> elements that accept text input (type=text, type=tel, etc.), the interface is InputEvent; for others, the interface is Event.
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 or selecting a value from a list of options. Note that the input event is not fired when JavaScript changes an element's value programmatically.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 79 | 6 | 3.1 | 18 | 2 | |
| The DOM beforeinput event fires when the value of an input or textarea element is about to be modified. But in contrast to the Element/input_event event, it does not fire on the select element. The event also applies to elements with HTMLElement.contentEditable enabled, and to any element when Document.designMode is turned on. | 60 | 79 | 87 | 10.1 | 60 | 10.3 |
| The InputEvent interface represents an event notifying the user of editable content changes. | 60 | 79 | 31 | 10.1 | 60 | 10.3 |
| The data read-only property of the InputEvent interface returns a string with inserted characters. This may be an empty string if the change doesn't insert text, such as when characters are deleted. | 60 | 79 | 67 | 10.1 | 60 | 10.3 |
| The dataTransfer read-only property of the InputEvent interface returns a DataTransfer object containing information about richtext or plaintext data being added to or removed from editable content. | 60 | 79 | 67 | 10.1 | 60 | 10.3 |
| The getTargetRanges() method of the InputEvent interface returns an array of StaticRange objects that will be affected by a change to the DOM if the input event is not canceled. | 60 | 79 | 87 | 10.1 | 60 | 10.3 |
| The InputEvent() constructor creates a new InputEvent object. | 60 | 79 | 31 | 10.1 | 60 | 10.3 |
| The inputType read-only property of the InputEvent interface returns the type of change made to editable content. Possible changes include for example inserting, deleting, and formatting text. | 60 | 79 | 66 | 10.1 | 60 | 10.3 |
inputType (insertFromPasteAsQuotation) Experimental `insertFromPasteAsQuotation` input type | | | 67 | | | |
| The InputEvent.isComposing read-only property returns a boolean value indicating if the event is fired after Element/compositionstartevent and before Element/compositionendevent. | 60 | 79 | 31 | 16.4 | 60 | 16.4 |
- This browser only partially implements this feature
- This feature was removed in a later browser version (79)
- Not supported on `select`, `checkbox`, or `radio` inputs.
Syntax
addEventListener("input", (event) => { })
oninput = (event) => { }Use cases
-
Using input (event)
The input event fires when the value of an <input>, <select>, or <textarea> element has been changed as a direct result of a user action (such as typing in a textbox or checking a checkbox).
Cautions
- May not be supported in older browsers.
Implementation notes
- Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.