在 \`<input type=number>\` 上禁用滚动

Question

是否可以禁用滚轮更改输入数字字段中的数字？我已经弄乱了特定于 webkit 的 CSS 来删除微调器，但我想完全摆脱这种行为。我喜欢使用 type=number 因为它在 iOS 上提供了一个不错的键盘。

原文由 kjs3 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

防止鼠标滚轮事件在其他人建议的输入数字元素上的默认行为（调用“blur()”通常不是首选方法，因为这不是用户想要的）。

但。我会避免一直监听所有 input-number 元素上的鼠标滚轮事件，并且只在元素处于焦点时（即问题存在时）才这样做。否则，当鼠标指针位于 input-number 元素上的任何位置时 ，用户无法滚动页面。

jQuery的解决方案：

 // disable mousewheel on a input number field when in focus
// (to prevent Chromium browsers change the value when scrolling)
$('form').on('focus', 'input[type=number]', function (e) {
  $(this).on('wheel.disableScroll', function (e) {
    e.preventDefault()
  })
})
$('form').on('blur', 'input[type=number]', function (e) {
  $(this).off('wheel.disableScroll')
})

（将焦点事件委托给周围的表单元素 - 以避免对许多事件侦听器不利，这对性能不利。）

原文由 Grantzau 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一个事件侦听器来统治他们

这类似于 @Simon Perepelitsa 在纯 js 中的 回答，但更简单一些，因为它将 一个事件侦听器放在所有输入的文档元素上，并检查焦点元素是否是数字输入 tpye ：

 document.addEventListener("wheel", function(event){
    if(document.activeElement.type === "number"){
        document.activeElement.blur();
    }
});

如果你想 通过 class/id 关闭某些字段的值滚动行为，而不是其他字段， 只需添加 && 和相应的文档选择器：

 document.addEventListener("wheel", function(event){
    if(document.activeElement.type === "number" &&
       document.activeElement.classList.contains("noscroll"))
    {
        document.activeElement.blur();
    }
});

有了这个：

 <input type="number" class="noscroll"/>

如果输入有 noscroll 类，它不会在滚动时改变，否则一切都保持不变。

在此处使用 JSFiddle 进行测试

原文由 Peter Rakmanyi 发布，翻译遵循 CC BY-SA 4.0 许可协议