用于号码输入滚动的HTML5事件侦听器 - 仅限于Chrome [英] HTML5 event listener for number input scroll - Chrome only

问题描述

我正在玩一些HTML5元素，遇到了一个有趣的行为。这只适用于Chrome。

使用输入类型的数字，您可以设置最小值，最大值和步长，并且上下箭头来控制输入。 < input type =numbermin =0max =100step =5/>

我发现绑定一个点击事件侦听器会捕获箭头上的按键，因为在字段模糊之前，实际上不会发生更改。您还可以使用键盘上的向上和向下箭头键更改限制内的值，然后按键绑定可以选择这些。

但是，在Chrome中，您还可以使用鼠标滚轮来更改输入，方法是将鼠标悬停在输入和滚动上。然而，我还没有找到一种方式来听这个事件。

jsfiddle上的示例

HTML：

 < input type =numbermin =0max =100step =5id =test/> 
  

JavaScript（使用jQuery）：

  $（'#test'）.click（function（）{
 $（this）.after（'< br /> click'）; 
} ）; 
 
 $（'#test'）.change（function（）{
 $（this）.after（'< br /> change'）; 
}） ; 
 
 $（'#test'）.keypress（function（）{
 $（this）.after（'< br /> keypress'）; 
}） ; 
  

有关如何收听滚动更改的任何想法？再次，这只适用于Chrome，因为这个写作。

解决方案

jQuery鼠标滚轮插件似乎是做的伎俩。 http://plugins.jquery.com/project/mousewheel

  $（'#test'）.mousewheel（function（）{
 $（this）.after（'< br /> '）; 
}）; 
  

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.

解决方案

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

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

这篇关于用于号码输入滚动的HTML5事件侦听器 - 仅限于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！