Element: input event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Theinput event fires when thevalue 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 withcontenteditable enabled, and to any element whendesignMode is turned on. In the case ofcontenteditable anddesignMode, the event target is theediting host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.

For<input> elements withtype=checkbox ortype=radio, theinput event should fire whenever a user toggles the control, per theHTML Living Standard specification. However, historically this has not always been the case. Check compatibility, or use thechange event instead for elements of these types.

For<textarea> and<input> elements that accept text input (type=text,type=tel, etc.), the interface isInputEvent; for others, the interface isEvent.

Theinput event is fired every time thevalue of the element changes. This is unlike thechange 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 theinput event is not fired when JavaScript changes an element'svalue programmatically.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("input", (event) => { })oninput = (event) => { }

Event type

AnInputEvent. Inherits fromUIEvent.

Event properties

This interface inherits properties from its parents,UIEvent andEvent.

InputEvent.dataRead 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.dataTransferRead only: Returns aDataTransfer object containing information about richtext or plaintext data being added to or removed from editable content.
InputEvent.inputTypeRead only: Returns the type of change for editable content such as, for example, inserting, deleting, or formatting text.
InputEvent.isComposingRead only: Returns aBoolean 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

html

<input placeholder="Enter some text" name="name" /><p></p>

JavaScript

const input = document.querySelector("input");const log = document.getElementById("values");input.addEventListener("input", updateValue);function updateValue(e) {  log.textContent = e.target.value;}