input number remove scroll
<!-- input number remove scroll -->
<!--
There's multiple ways to do this, some involving just CSS, others in
jQuery and some in just plain old pure JavaScript.
Below I show one of each method.
-->
<!-- CSS Method -->
<input type="number" onwheel="this.blur()" />
<style>
/* Additionally, you can remove the input arrows */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Required */
input[type="number"] {
-moz-appearance: textfield;
}
</style>
<!-- jQuery Method -->
<form><input type="number"/></form>
<script>
// Prevent Cromium browsers change the value when scrolling
$('form').on('focus', 'input[type=number]', function (e) {
$(this).on('wheel.disableScroll', function (e) {
e.preventDefault();
});
});
// Required
$('form').on('blur', 'input[type=number]', function (e) {
$(this).off('wheel.disableScroll');
});
</script>
<!-- Pure JavaScript Methods -->
<input type="number" class="noscroll"/>
<script>
// Turn off the value scrolling behaviour on all fields
document.addEventListener("wheel", function(event){
if(document.activeElement.type === "number"){
document.activeElement.blur();
}
});
// Turn off the value scrolling behaviour on specific fields
let inputClassCheck = document.activeElement.classList.contains("noscroll");
document.addEventListener("wheel", function(event) {
if(document.activeElement.type === "number" && inputClassCheck) {
document.activeElement.blur();
}
});
</script>
<!-- All methods here and more were found in the source to this answer. -->