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

Question

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

Answer 1

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

但是。我会避免一直监听所有 input-number 元素上的 mousewheel 事件，并且只在元素处于焦点时(即存在问题时)才这样做。否则，当鼠标指针位于 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')
})

(将焦点事件委托(delegate)给周围的表单元素 - 以避免出现许多不利于性能的事件监听器。)