title: HTML5 event listener for number input scroll - Chrome only
body: <p>I'm playing around with some HTML5 elements, and ran into a fun behavior. This only works in Chrome.</p>
  
  <p>Using an input type of number, you can set the min, max, and step, and get up and down arrows to control the input. <code>&lt;input type="number" min="0" max="100" step="5" /&gt;</code></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><a href="http://jsfiddle.net/ppDFV/" rel="noreferrer">Example on jsfiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="number" min="0" max="100" step="5" id="test" /&gt;
  </code></pre>
  
  <p>JavaScript (using jQuery):</p>
  
  <pre><code>$( '#test' ).click(function(){
     $( this ).after( '&lt;br /&gt;click' ); 
  });
  
  $( '#test' ).change(function(){
     $( this ).after( '&lt;br /&gt;change' ); 
  });
  
  $( '#test' ).keypress(function(){
     $( this ).after( '&lt;br /&gt;keypress' ); 
  });
  </code></pre>
  
  <p>Any ideas on how to listen for that scroll change? Again, this only works in Chrome as of this writing.</p>