問題描述

我正在玩一些 HTML5 元素，并遇到了一個有趣的行為.這僅適用于 Chrome.

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

使用數字輸入類型，您可以設置最小值、最大值和步長，并通過上下箭頭來控制輸入.<input type="number" min="0" max="100" step="5"/>

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.

但是，在 Chrome 中，您也可以使用鼠標滾輪來更改輸入，方法是將鼠標懸停在輸入上并滾動.但是，我一直無法找到監聽此事件的方法.

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.

jsfiddle 示例

HTML:

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

JavaScript(使用 jQuery):

JavaScript (using jQuery):

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

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

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

關于如何監聽滾動變化的任何想法?同樣，在撰寫本文時，這僅適用于 Chrome.

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

推薦答案

jQuery 鼠標滾輪插件似乎可以解決問題.http://plugins.jquery.com/project/mousewheel

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的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！