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 (blur
s) a given form controls. Enter the onInput
event, 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!
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![9 More Mind-Blowing WebGL Demos]()
With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities. I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...
![jQuery UI DatePicker: Disable Specified Days]()
One project I'm currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI's DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the...
![QuickBoxes for Dojo]()
Adding to my mental portfolio is important to me. First came MooTools, then jQuery, and now Dojo. I speak often with Peter Higgins of Dojo fame and decided it was time to step into his world. I chose a simple but useful plugin...
I agree that onInput is very handy, but I beg to differ on the point that there is no more use for onChange. E.g. in this tutorial for creating a custom audio player: https://css-tricks.com/lets-create-a-custom-audio-player/#play-pause There, the onChange event is used for a range input element to seek to a passage in an audio file. While playing the audio, you might not want the current position in the audio to change on every input, but only after having finished seeking the correct passage.