Disable Input[type=number] scroll action

additional_notes.md

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:

• StackOverflow
• CSS Tricks

hide_input_number_scroll.css

// 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; 
}

remove_input_number_scroll.js

// 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;
    }
});

Thanks this was helpful!

Please, show me for React