【Javascript】< input type=’number’ / > に対してマウスホイールでの入力を無効にする

<input type = 'number' />

といった数値入力のinput要素に対して、画面上でフォーカスし、マウスをスクロールすると数値入力されてしまう場合があります。

今回はこのマウスホイールでの数値入力を無効化していきたいと思います。

解決策
参考資料

解決策

input 要素の onFocus の event を使います。

<input 
  type= 'number' 
  onFocus={(e) =>
          e.target.addEventListener(
            'wheel',
            (e) => {
              e.preventDefault();
            },
            { passive: false }
          )
        }
/>

e.preventDefault();だけでは無効にできません。.addEventListenerの第３引数でpassive: falseが必要になります。

chrome上では、デフォルトで true になっているそう。なので、<input>に、フォーカス時にこのpassiveをfalseにさせます。

これで入力フォームがフォーカスされている時のマウススクロールが無効化され、数値が入力されません。

参考資料

[Javascript] イベントリスナーの第3引数を甘く見ていた件

IT,技術学習,アイデア,妄想.日記,メンタル,継続,ブログ,Podcast,プログラミング,DIY,クリエイティブ,デザイン,

touchやwheelのイベントリスナーにpassive: trueを明示的に指定する必要があるのか調べてみた - Qiita

これは何EventTarget.addEventListener() #パッシブリスナーによるスクロールの性能改善 - Web API | MDN にあるように、以下のようなイベントに対してイベン…