Element: 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.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("input", (event) => {});
oninput = (event) => {};
Event type
An InputEvent
. Inherits from UIEvent
.
Event properties
This interface inherits properties from its parents, UIEvent
and Event
.
InputEvent.data
Read only-
Returns a string with the inserted characters. This may be an empty string if the change doesn't insert text (for example, when deleting characters).
InputEvent.dataTransfer
Read only-
Returns a
DataTransfer
object containing information about richtext or plaintext data being added to or removed from editable content. InputEvent.inputType
Read only-
Returns the type of change for editable content such as, for example, inserting, deleting, or formatting text.
InputEvent.isComposing
Read only-
Returns a
Boolean
value indicating if the event is fired aftercompositionstart
and beforecompositionend
.
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 |
---|
UI Events # event-type-input |
HTML Standard # handler-oninput |
Browser compatibility
BCD tables only load in the browser
See also
-
Related events