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 (HTML) # handler-oninput

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`oninput`	1	12	9	9	10	4	≤37	18	9	10.1	3.2	1.0

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>