让我的 html 输入数字字段在滚轮上更改，即使它们在 Chrome 中没有聚焦

Make my html input number fields change on scroll wheel even if they aren't focused in Chrome

本文关键字：Chrome 聚焦 数字 输入 html 我的 字段      更新时间：2023-09-26

像这样输入一个字段：

​<input type='number' step='1' />​​​​​​​​​​​​​​​​​

在Chrome中，您可以通过单击此字段，然后向上或向下移动滚轮来更改此字段的值。但是，您不能简单地将鼠标悬停在字段上并使用滚轮进行更改（就像在 Opera 中一样）。如何更改此行为，以便不必选择字段即可使用滚轮进行更改？我对使用 javascript/jQuery（但不是 jQuery UI）的解决方案持开放态度。如果这很重要，我正在使用 Chrome 21 for Linux。

使用 hover() 

    $("#spinner").hover(
        function()
        {
            $(this).focus();
        },
        function(){
            $(this).blur();
        }
);​

http://jsfiddle.net/Yeqmp/3/

mouseover时聚焦输入字段：

$("input[type='number']").mouseover(function(){
    this.focus();
});​

演示：http://jsfiddle.net/DerekL/Yeqmp/2/

若要使数字或时间输入可旋转，只需将空的鼠标滚轮处理程序添加到页面上的至少一个控件： 

<input type="time" value="12:00" onmousewheel="onWheel()"/>
<script>
  function onWheel() { }
</script>

在Chrome上选中，它适用于页面上的所有控件。

相关文章：