The attribute for input tag"onchange" will not fire, but "onkeydown" will, why?

Question

I am creating a lightning web component.

In the .html I have an input tag of type text, each time the user changes the field of this input I want to run a function on the input.

<label class="my-label-class" for="date-of-birth-day">Day</label>
<input class="my-input-class" 
       id="date-of-birth-day" 
       name="date-of-birth-day"
       type="number" 
       onchange={validateNumberInput}></input>

And in the .js I have a simple function that should just console.log the word "hello"

import { LightningElement } from 'lwc';

export default class myClassHere extends LightningElement {

    day;
    month;
    year;

    validateNumberInput(event){
        console.log("hello");
    }
}

When I type something into the input, validateNumberInput will not fire. However if I use onkeydown, it will fire.

Am I missing something here that would make onchange work?

Answer 1

onchange is only triggered when the control is out of focus. That means you have to click outside of the input field after typing something to fire the onchange event.

If you need event to fire immediately after every keystroke, use onkeyup, onkeydown or onkeypress instead.