Best way to track onchange as-you-type in input type=“text”?

Question

In my experience, input type=\"text\" onchange event usually occurs only after you leave (blur) the control.

Is there a way to

Answer 1

These days listen for oninput. It feels like onchange without the need to lose focus on the element. It is HTML5.

It’s supported by everyone (even mobile), except IE8 and below. For IE add onpropertychange. I use it like this:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerHTML = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on 
// source.addEventListener('change', inputHandler);