The oninput
property of the GlobalEventHandlers
mixin is an EventHandler
that processes input
events on the <input>
, <select>
, and <textarea>
elements. It also handles these events on elements where contenteditable
or designMode
are turned on.
Note: Unlike oninput
, the onchange
event handler is not necessarily called for each alteration to an element's value
.
Syntax
target.oninput = functionRef;
Value
functionRef
is a function name or a function expression. The function receives an InputEvent
object as its sole argument.
Example
This example logs the number of characters in an <input>
element, every time you modify its contents.
HTML
<input type="text" placeholder="Type something here to see its length." size="50"> <p id="log"></p>
JavaScript
let input = document.querySelector('input'); let log = document.getElementById('log'); input.oninput = handleInput; function handleInput(e) { log.textContent = `The field's value is ${e.target.value.length} character(s) long.`; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'oninput' in that specification. |
Living Standard | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
oninput | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 2 | IE Full support 9 | Opera Full support 10 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
The following links discuss compatibility issues and fixes that may be helpful when working with older browsers:
- A HTML5 Browser maze, oninput support
- Fixing oninput in IE Using html5Widgets includes polyfill for IE6-8
- Mathias Bynens suggests binding to both input and keydown
- oninput event | dottoro has notes about bugginess in IE9
- Bug 312094 - Add support for <select oninput>
See also
input
event