Answers for "html number input disable scroll"

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. -->