THE WORLD'S LARGEST WEB DEVELOPER SITE

oninput Event

❮ Event Object

Example

Execute a JavaScript when a user writes something in an <input> field:

<input type="text" oninput="myFunction()">
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The oninput event occurs when an element gets user input.

This event occurs when the value of an <input> or <textarea> element is changed.

Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on <keygen> and <select> elements.


Browser Support

The numbers in the table specify the first browser version that fully supports the event.

Event
oninput Yes 9.0 4.0 5.0 Yes


Syntax

In HTML:

<element oninput="myScript">
Try it Yourself »

In JavaScript:

object.oninput = function(){myScript};
Try it Yourself »

In JavaScript, using the addEventListener() method:

object.addEventListener("input", myScript);
Try it Yourself »

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.


Technical Details

Bubbles: Yes
Cancelable: No
Event type: Event
Supported HTML tags: <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type="number">, <input type="password">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week"> and <textarea>
DOM Version: Level 3 Events

More Examples

Example

Range slider - how to dynamically update slider value:

<input type="range" oninput="myFunction(this.value)">
Try it Yourself »

❮ Event Object