How do i know what triggered on change?

Question

Is there a way to know what type of move triggered the onChange event on an input type="number"

I explain :

I want to know if the change came from the "text" area or the "down and up arrows" area. Is it possible ?

Answer 1

The onchange event will fire at every input only from the UI and up-down key inputs.
Otherwise, we must loose the focus, or press enter to trigger this event.

So we can check whether we are still the activeElement and thus fired from the UI, or not, and thus came from typing.
With the one exception of the Enter key...

 let enter_down = false; inp.addEventListener('change', e => { if(enter_down || inp !== document.activeElement) { console.log('typing'); } else { console.log('arrows'); } }); inp.addEventListener('keydown', e => { if(e.key === 'Enter') { enter_down = true; } }); inp.addEventListener('keyup', e => { if(e.key === 'Enter') { enter_down = false; } }); 

 <input type="number" id="inp"> 

Answer 2

You can do something like this with vanillaJavascript:

 //Define a flag to save if the user used the keyboard on the input or the right arrows let keyUpFlag = false; //each time a change on the input is made by using the keyboard, the keyUpFlag is set to true function onKeyUp(event) { keyUpFlag = true; } //bind this callback funtion to the on change event of the input function onChange(event) { // if the this flag is set to true, means that the user changed the input by using the keyboard, so by changing the text. if (keyUpFlag) { console.log("On change from text!"); } else { //If not, means that used the the right arrows to change the value console.log("On change from the arrows!"); } //sets again the flat to false in order to reset the on key value state keyUpFlag = false; } 

 <input type="number" onchange="onChange(event)" onkeyup="onKeyUp(event)"> 

Answer 3

The Event object from the callback will not give you this information. But you may try this trick:

 const onChange = function(e) { if ($(this).data('_oldval') !== this.value) { console.log('from arrows') } $(this).removeData('_oldval'); }; const onKeyUp = function(e) { if (e.which >= 37 && e.which <= 40) { return onChange(e); } $(this).data('_oldval', this.value); console.log('from text field'); }; $('input').on('change', onChange); $('input').on('keyup', onKeyUp); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number"> 

The same without jQuery:

 const onChange = function(e) { if (this.dataset) { if (this.dataset._oldval !== this.value) { console.log('from arrows') } delete this.dataset._oldval; } }; const onKeyUp = function(e) { if (e.which >= 37 && e.which <= 40) { return onChange(e); } this.dataset._oldval = this.value; console.log('from text field'); }; document.querySelector('input').addEventListener('change', onChange); document.querySelector('input').addEventListener('keyup', onKeyUp); 

 <input type="number">