jquery - HTML5 event listener for number input scroll - Chrome only

Question

I'm playing around with some HTML5 elements, and ran into a fun behavior. This only works in Chrome.

Using an input type of number, you can set the min, max, and step, and get up and down arrows to control the input. <input type="number" min="0" max="100" step="5" />

I've found that binding a click event listener captures presses on the arrows, as a change won't actually occur until the field is blurred. You can also use the up and down arrow keys on your keyboard to change the value within the limits, and a keypress bind can pick these up.

In Chrome, however, you can also use your mouse wheel to change the input, by hovering over the input and scrolling. I have not been able to find a way to listen for this event, however.

Example on jsfiddle

HTML:

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

JavaScript (using jQuery):

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

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

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

Any ideas on how to listen for that scroll change? Again, this only works in Chrome as of this writing.

Answer 1

The jQuery Mouse Wheel plugin seems to do the trick. http://plugins.jquery.com/project/mousewheel

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