<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にさせます。
これで入力フォームがフォーカスされている時のマウススクロールが無効化され、数値が入力されません。