oninput Event
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 <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 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, InputEvent |
| 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 »
