The Problem
Sometimes I think we all are so inclined towards Javascript frameworks or libraries that we don't pay attention to how things work natively. Recently when I was debugging an issue about input tag's onchange event, I was startled when the callback function was not being called on changing the input value. Well, React triggers onChange whenever one changes the input value. Coming from React I just assumed that such things would work the same in vanilla Javascript 😔 😔 . The way browser fires the onchange event is different.
Javascript onchange
Coming from React it's easy to fall into the trap. But let's understand some events the browser fires when one interacts with the input tag
- onfocus - Fired when the user sets focus on the element
- onblur - Opposite of onfocus. Fired when an element loses focus
- onchange - (the most interesting one 😅). Unlike React, the browser fires onchange event after focus from input element is taken off. So when focus is set on an input element and something is typed, onchange won't be fired until and unless the input element is out of focus.
When an element is out of focus, the browser assumes that the user is done making the change(probably the reason why onchange is fired late).
Let's see this in action. Check out the JS part here and open your console to see what is logged.
Note that onchange is fired only when input is out of focus
Question for the readers 🧐
I am not too sure as to why in the above example onblur callback is fired after the onchange callback. We know now that onchange is fired when the element is out of focus. Know the reason?? Please comment down below.
React onChange
Apart from the camel case difference the way React onChange handler works is also pretty different. It gets triggered whenever one makes a change in the input element value.
I tried to create something like React onChange. Let's have a look (not saying that this is how it works exactly).
- I had attached my custom onChange callback to the element.
- Using setter/getter to get the previously entered value and compare it with the latest one.
- Additionally attached a keyup event listener to get hold of the latest value
- Notice that the custom onChange handler gets triggered everytime a change is made.
Bye Bye !! 👋👋 Hope there were takeaways.
Top comments (7)
onchangeis fired when "the user commits the change" to the input field. So it happens when they pressEnteror leave the field for a standard text input or text area. Given this is an input event it occurs before the more generalonblur.Side note: HTMLElement->input Event
Couple of drawbacks when using input event caniuse.com/input-event
This is the problem with not knowing the basics before moving to a framework. I've interviewed many, many developers who simply cannot do anything without React or framework XXX and all the associated tooling. That is a really bad state for the industry to be in
Completely agree
Yup agreed. Could have used that.
Check notes for caniuse.com/input-event