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.


target.oninput = functionRef;


functionRef is a function name or a function expression. The function receives an InputEvent object as its sole argument.


This example logs the number of characters in an <input> element, every time you modify its contents.


<input type="text" placeholder="Type something here to see its length." size="50">
<p id="log"></p>


let input = document.querySelector('input');
let log = document.getElementById('log');

input.oninput = handleInput;

function handleInput(e) {
  log.textContent = `The field's value is
      ${} character(s) long.`;



Specification Status Comment
HTML Living Standard
The definition of 'oninput' in that specification.
Living Standard Initial definition

Browser compatibility

ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
oninputChrome Full support YesEdge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes


Full support
Full support

The following links discuss compatibility issues and fixes that may be helpful when working with older browsers:

See also