Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save barbietunnie/121e98d66838c90ff7993ebd99fe3310 to your computer and use it in GitHub Desktop.
Save barbietunnie/121e98d66838c90ff7993ebd99fe3310 to your computer and use it in GitHub Desktop.
Disable Input[type=number] scroll action

Disable Input[type=number] scroll action

WebKit desktop browsers add little up down arrows to number inputs called spinners.

These spinners have their value changed inadvertently when the scroll wheel is active on the number field. To prevent this from happen, you may choose to prevent this functionality, even though it ignores accessibility considerations.

Here are further discussions regarding this:

// Source: https://css-tricks.com/snippets/css/turn-off-number-input-spinners/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
// Disable Mouse scrolling
$('input[type=number]').on('mousewheel',function(e){ $(this).blur(); });
// Disable keyboard scrolling
$('input[type=number]').on('keydown',function(e) {
var key = e.charCode || e.keyCode;
// Disable Up and Down Arrows on Keyboard
if(key == 38 || key == 40 ) {
e.preventDefault();
} else {
return;
}
});
@mrdev2088
Copy link

Please, show me for React

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment