HTML5 INPUT type = 'number' - distingue tra focus e value-change click del mouse

Question

In HTML5 INPUT type='number' l'utente può modificare il valore facendo clic sulle frecce su/giù che fanno parte della casella INPUT. L'utente potrebbe anche fare clic nella casella per mettere a fuoco o per modificarne il contenuto.

C'è un modo semplice per distinguere tra queste due attività nel trigger click?

---

dalla risposta di @cvsguimaraes, che dimostra meglio la teoria.

utilizzando la sua metodologia, ecco la mia versione completa (?). lo scopo: accertarsi che vengano chiamati i normali trigger change quando si utilizza +/- per modificare i dati.

// 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); 

su Chrome che sta funzionando senza problemi finora tranne che quando si rimuove attenzione dalla voce grilletto change entreranno in gioco di nuovo. Ho risolto questo problema con un trigger a basso livello che interrompe la propagazione se la precedente chiamata di cambiamento proveniva dallo mouseup.

Answer 1

Eccolo! Quando l'utente cambia il valore cliccando su frecce su/giù si innesca oninput, e convenientemente è innescato tra onmousedown e 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 Ora gestisce anche modificare la tastiera quando viene premuto il mouse.

---

EDIT è molto meglio ora, grazie a gion_13

Answer 2

Here è una demo di come è possibile acquisire e analizzare gli eventi cambiare l'ingresso e in quale ordine.

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); 
});