8

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.

hookedonwinter
  • 12,436
  • 19
  • 61
  • 74
  • 1
    While not an answer to your question, you might also consider tracking changes to the value with a setTimeout loop, replacing all of the event handlers. Not great performance, but works with any input method. – Scott Reynen Apr 14 '11 at 21:20
  • That would totally work. Even just start the timer on focus, and kill it on blur. Such an edge case I'm not going to worry about it on production, but I was curious for the theoretical value. – hookedonwinter Apr 14 '11 at 22:08
  • 1
    FWIW - it looks like chrome now fires a change event when you scroll over a number input field or click the increment buttons. – Sam Dufel May 23 '13 at 20:19

1 Answers1

8

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

$( '#test' ).mousewheel(function(){
   $( this ).after( '<br />mouse wheel' ); 
});
jeff_bail
  • 116
  • 4
  • 3
    [I forked the OP's jsFiddle with that plugin](http://jsfiddle.net/V9Uck/), showing your solution – ExtraGravy Apr 14 '11 at 21:24
  • 2
    while jQuery does not support it out of the box and if you don't want to import a pluggin each time a feature lack, you might just use a vanilla listener `$('#test')[0].addEventListener('mousewheel', function(){ $('#test').after( '
    scroll' ); });`     – zeachco Aug 18 '15 at 14:58