onInput Event

Coding HTML forms has been painful my entire career. Form controls look different between operating systems and browsers, coding client side and server side validation is a nightmare, and inevitably you forget something somewhere along the line. Some behaviors don’t act the way you’d hope, like onChange, which only fires when the user leaves (blurs) a given form controls. Enter the onInputevent, which changes upon keystroke, paste, etc.

// Try it here:  https://codepen.io/darkwing/pen/KKmBNvg
myInput.addEventListener('input', e => {
  console.log(e.target.value);
});

These days it seems like the old onChange behavior isn’t useful — we always want to react to any user input. onInput also fires on elements with contenteditable and designmode attributes. Most modern JavaScript libraries like React treat onChange like onInput, so it’s as though onChange has lost its use!