0

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.

JSmith
  • 4,519
  • 4
  • 29
  • 45
  • Possible duplicate of [onchange event for input type="number"](https://stackoverflow.com/questions/9609731/onchange-event-for-input-type-number) – Muhammad Omer Aslam May 06 '18 at 22:11
  • Nope. perhaps I'm not clear but the jsFiddle in this example doesn't give me the desired result. the alert should pop-up the first time the value changes with the mouse. there it only pops-up when the mouse is up – JSmith May 06 '18 at 22:14
  • 1
    Possible duplicate of [onchange event on input type=range is not triggering in firefox while dragging](https://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging) – JSmith May 07 '18 at 12:15
  • yeah that should do it – Muhammad Omer Aslam May 07 '18 at 12:51

2 Answers2

1

You should use keyup and mouseup events since you have added the tag for jquery if I understood correctly you want the alert/console.log to appear or show the value whenever you change the value using the mouse or the keyboard, if that is correct here is the demo you can see the console prints the value every time you use mouse, keypad, num keys, or arrow keys. Hope it helps

var here = 0;
$("#my-input").on('keyup mouseup change', function() {
  if ($(this).val() !== '') {
    console.log(here++);
    console.log("the value is " + $(this).val());
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="my-input" type="number" step="1">

EDIT

Or if you are looking to detect the number change if you keep your key pressed on the arrow of the number input that appears when we hover over it then i dont think it would be an easy task to do, in that case you should use a custom slider and bind the slider to a hidden input to keep updating the value and bind the onchange to that hidden input which keeps on updating you cavas

Community
  • 1
  • 1
Muhammad Omer Aslam
  • 22,976
  • 9
  • 42
  • 68
  • I must have explained my problem really badly. Your solution not to offense you but it's a fact (on my computer at least) is worst than before. The console.log in your solution only triggers when key is up. What I would like is to keep the onchange behavior for the keyboard and have the same when I increment/decrement with the mouse. Function should trigger every time the number changes on screen. Do you have a better understanding of my problem? Thanks in advance – JSmith May 06 '18 at 22:25
  • no you explained clearly and i understood the same thing as you are saying now, the strange thing is that for me it works in all scenarios, what browser are you using @JSmith – Muhammad Omer Aslam May 06 '18 at 22:27
  • Firefox Quantum 59.0.2 (64 bits) – JSmith May 06 '18 at 22:28
  • i tested it on `chrome Version 66.0.3359.139 (Official Build) (64-bit)` and `FF Quantum 59.0.3 (64-bit)` and it works good there too can you update to the latest and recheck, or test it in chrome. @JSmith – Muhammad Omer Aslam May 06 '18 at 22:30
  • I've just tried it on chrome and chrome canary and I get the same thing. Console log only shows when mouse is up or key is up. Even if I update won't change that it doesn't work with older versions. – JSmith May 06 '18 at 22:34
  • tell me one thing what do you mean by **What I would like is my function triggering every time the value changes on screen** are you trying to update the value programmatically? other than using keyboard and mouse, for example, let's say clicking some button and sending ajax call and adding up the value received from the ajax call to the input? @JSmith – Muhammad Omer Aslam May 06 '18 at 22:39
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170490/discussion-between-jsmith-and-muhammad-omer-aslam). – JSmith May 06 '18 at 22:40
  • Sorry I've deselected the "marked as answer" as I get the exact same problem with the slider. input of type range behaves exactly the same – JSmith May 07 '18 at 11:36
0

The answer is to use the oninput event.

JSmith
  • 4,519
  • 4
  • 29
  • 45