0

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?

1 Answer 1

0

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.

1
  • Thank you for your response, I think I have been getting mixed up with how onChange works in the React framework. For my purposes I think oninput might actually be the best option as it will trigger with a copy paste as well.
    – kennedydmb
    Jul 22 at 10:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.