Element: input event
====================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
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.


```js
addEventListener("input", (event) => {});

oninput = (event) => {};
```

Event type
----------

An `InputEvent`. Inherits from `UIEvent`.

Event

UIEvent

InputEventEvent 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 after `compositionstart` and before `compositionend`.

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 id="values"></p>
```

### JavaScript


```js
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 with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related events
    + `beforeinput`
    + `change`
    + `invalid`