HTML5 INPUT type = 'number' - distinguish between mouse clicks of focus and changes in value

Question

In HTML5, INPUT type='number' user can change the value by clicking the up / down arrows in the INPUT field. The user can also click in the field for focus or to edit its contents.

Is there any easy way to distinguish these two actions from a click trigger?

---

from @cvsguimaraes is the answer that better demonstrates the theory.

using my methodology, here is my finished (?) version. goal: make sure that using regular +/- triggers change triggers.

 // input/mouseup triggers to call change from +/- mouse clicks // want to wait 500ms before calling change in case successive clicks render.inputCh = false; render.inputCt = 0; render.inputFn = function(e) { render.inputCh = true; } render.mouseupFn = function(e) { if( render.inputCh ) { render.inputCh = false; render.inputCt++; setTimeout( next, 500 ); } function next() { render.inputCt--; if( render.inputCt ) return; var change = document.createEvent("Event"); change.initEvent('change',true,true); e.target.dispatchEvent(change); } } // using input/mouseup triggers document.getElementById('number').addListener('input',render.inputFn,true); document.getElementById('number').addListener('mouseup',render.mouseuptFn,true); // normal change trigger - will be called normally and via +/- mouse click document.getElementById('number').addListener('change',changeFn,false); 

it still works flawlessly on chrome, except that when you remove focus from an ITEM, the change trigger turns on again. I solved this with a low-change trigger that stops propagation if the previous change call was from mouseup .

Answer 1

Here he is! When the user changes the value by pressing the up / down arrows, he starts oninput and conveniently starts between onmousedown and onmouseup

 <script> window.onload = function() { changeType = 'none'; var input = document.getElementById('number'); var events = [ "mousedown", "mouseup", "input", "keypress" ]; events.map(function(ev){ input.addEventListener(ev,function(){ switch(ev) { case 'input': if(changeType!='keypress') changeType = 'input'; break; case 'mouseup': switch(changeType) { case 'mousedown': console.log('normal click'); break; case 'keypress': console.log('click with edit via keyboard'); break; case 'input': console.log('click on up/down arrows'); break; } break; default: changeType = ev; break; } },false); }); } </script> <input type="number" id="number"> 

---

EDIT Now, when you click the mouse, it also processes keyboard editing.

---

EDIT Now much better thanks gion_13

Answer 2

Here's a demo of how you can capture and analyze which events change input and in what order.

HTML:

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

script:

 var input = document.getElementById('number'), events = [ "click", "mousedown", "mouseup", "focus", "change", "input", "keydown", "keypress", "keyup" ]; events.forEach(function(ev) { input.addEventListener(ev, function() { console.log(ev, ' => ', input.value); }, false); });