[解決済み] <input type=number>` のスクロールを無効化する。

質問

数値入力欄でスクロールホイールによる数値変更を無効にすることは可能でしょうか？ webkit固有のCSSをいじってスピナーを消したのですが、この動作を完全になくしたいです。私は type=number iOSでキーボードが表示されるからです。

解決方法は？

他の人が提案したように、input-number要素でのmousewheelイベントのデフォルト動作を防止します（"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')
})

(フォーカスイベントを周囲のフォーム要素に委譲する - イベントリスナーが多すぎてパフォーマンスが悪くなるのを避けるため)