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!
![Introducing MooTools Templated]()
One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating:
new Element Madness
The first way to create UI-driven...
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![MooTools 1.2 OpenLinks Plugin]()
I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...
![Introducing MooTools NextPrev]()
One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item.
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.