停用`< input type = number>`的滚动功能 [英] Disable scrolling on `<input type=number>`

问题描述

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

Is it possible to disable the scroll wheel changing the number in an input number field? I've messed with webkit-specific CSS to remove the spinner but I'd like to get rid of this behavior altogether. I like using type=number since it brings up a nice keyboard on iOS.

推荐答案

防止mousewheel事件对输入数字元素的默认行为，像其他人建议的（称为blur通常不是首选的方式，因为那不会是，用户想要什么）。

Prevent the default behavior of the mousewheel event on input-number elements like suggested by others (calling "blur()" would normally not be the preferred way to do it, because that wouldn't be, what the user wants).

但是。我会避免监听所有input-number元素的mousewheel事件，只有当元素在焦点（这是当问题存在）时。否则，当鼠标指针位于输入数字元素上的任何位置时，用户无法滚动页面。

BUT. I would avoid listening for the mousewheel event on all input-number elements all the time and only do it, when the element is in focus (that's when the problem exists). Otherwise the user cannot scroll the page when the mouse pointer is anywhere over a input-number element.

jQuery的解决方案：

Solution for jQuery:

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

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

(Delegate focus events to the surrounding form element - to avoid to many event listeners, which are bad for performance.)

这篇关于停用`< input type = number>`的滚动功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！