GlobalEventHandlers.oninput
The oninput
property of the
GlobalEventHandlers
mixin is an event handler 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 |
---|
HTML Standard # handler-oninput |
Browser compatibility
BCD tables only load in the browser
The following links discuss compatibility issues and fixes that may be helpful when working with older browsers:
- 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