Estoy jugando con algunos elementos HTML5 y me encontré con un comportamiento divertido. Esto solo funciona en Chrome.

Utilizando un tipo de número de entrada, puede establecer el mínimo, máximo y paso, y obtener flechas arriba y abajo para controlar la entrada. @<input type="number" min="0" max="100" step="5" />

Descubrí que vincular un detector de eventos de clic captura las pulsaciones en las flechas, ya que en realidad no se producirá un cambio hasta que el campo se vea borroso. También puede usar las teclas de flecha hacia arriba y hacia abajo en su teclado para cambiar el valor dentro de los límites, y una combinación de teclas puede recogerlas.

En Chrome, sin embargo, también puede usar la rueda del mouse para cambiar la entrada, pasando el cursor sobre la entrada y desplazándose. Sin embargo, no he podido encontrar una manera de escuchar este evento.

Ejemplo en jsfiddle

HTML:

<input type="number" min="0" max="100" step="5" id="test" />

JavaScript (usando jQuery):

$( '#test' ).click(function(){
   $( this ).after( '<br />click' ); 
});

$( '#test' ).change(function(){
   $( this ).after( '<br />change' ); 
});

$( '#test' ).keypress(function(){
   $( this ).after( '<br />keypress' ); 
});

¿Alguna idea sobre cómo escuchar ese cambio de desplazamiento? Una vez más, esto solo funciona en Chrome a partir de este escrito.