jqueryhtmleventsinput

How can I trigger a function while number is changing in an input of type number?

Let's say I have an input of type number as so:

<input type="number" step="0.05">

I would like to trigger a canvas rendering function called for example renderCanvas() each time the number is stepping up or down.

This solution:

<input type="number" step="0.05" onchange="renderCanvas()">

works when I use keyboard to decrement/increment my value, but when I use the arrows and the mouse the function only triggers when the mouse is up.

function renderCanvas()
{
  console.log("the value is " + document.getElementsByTagName("input")[0].value)
}
<input type="number" step="0.05" onchange="renderCanvas()">

How can I achieve the same result as when the keyboard is used with using the mouse?

ps: the question is not the same as this post as the function only triggers when key/mouse is up. What I would like is my function triggering every time the value changes on screen.

Solution

  • The answer is to use the input event.