onkeyup vs onchange for number type input

Question

I'm having a small issue dealing with number inputs on forms, specifically when trying to call a validation js function when the user modifies them.

<input type="number" name="somenumber" onkeyup="validateForm()" />

This method only calls if the user types a number in the box and is ignored when the user uses the up/down buttons supplied by the browser. So it isn't fully effective.

<input type="number" name="somenumber" onchange="validateForm()" />

This method works great for users using the up/down buttons, but if they type a number into box, it won't execute until they move to another element or click outside the box. It's not the end of the world, but I'd like users to be able to type in the box and immediately be able to click the currently disabled submit button, rather than having to click elsewhere to enable the button.

<input type="number" name="somenumber" onchange="validateForm()" onkeyup="validateForm()" />

So to get the best possible user experience, I'm doing this. The problem is that the function often gets called twice. It works fine I guess. The users don't even notice it's running twice. Still, it seems like I'm missing something and there must be some "right" way to deal with this.

Is there? Or is this just one of those things we have to work around?

Answer 1

You could use the oninput event.

function validateForm() {
  console.log('changed');
}

<input type="number" name="somenumber" oninput="validateForm()" />