Tipo de entrada HTML5 = 'número': distinga entre clics de mouse de foco y cambio de valores

Question

En HTML5 INPUT type='number', el usuario puede cambiar el valor haciendo clic en las flechas arriba/abajo que forman parte del cuadro ENTRADA. El usuario también puede hacer clic en el cuadro para enfocar o editar sus contenidos.

¿Hay alguna manera fácil de distinguir entre estas dos actividades en el disparador click?

---

de @cvsguimaraes answer, que demuestra mejor la teoría.

usando su metodología, aquí está mi versión final (?). el propósito: asegúrese de llamar a los activadores change cuando usa +/- para cambiar los datos.

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

en el cromo está funcionando sin problemas hasta ahora , excepto que cuando se quita el foco del tema, el gatillo change entrará en funcionamiento de nuevo. Lo resolví teniendo un activador de cambio de bajo nivel que detiene la propagación si la llamada de cambio anterior era del mouseup.

Answer 1

Aquí es todo! Cuando el usuario cambia el valor haciendo clic en flechas arriba/abajo se dispara oninput, y convenientemente se desencadenó entre onmousedown y 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"> 

---

EDITAR Ahora se maneja también el teclado de edición cuando se pulsa el ratón.

---

EDITAR es mucho mejor ahora, gracias a gion_13

Answer 2

Here es una demostración de cómo se puede capturar y analizar los eventos que cambiar la entrada y en qué orden.

html:

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

guión:

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