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

BCD tables only load in the browser

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

See also