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

Please, show me for React

I created a separate component with the utility. Then I implemented it into index.js -

ReactDOM.render(
  document.getElementById("root"),
);

// Initialize number input scroll prevention globally
disableNumberInputScroll();

Component disableNumberInputScroll.js:

// Utility to disable mouse wheel and arrow key interactions with number inputs
export const disableNumberInputScroll = () => {
  // Function to handle mouse wheel events
  const handleWheel = (e) => {
    if (e.target.type === 'number') {
      e.target.blur();
    }
  };

  // Function to handle keyboard events
  const handleKeyDown = (e) => {
    if (e.target.type === 'number') {
      const key = e.charCode || e.keyCode;
      // Disable Up (38) and Down (40) arrow keys
      if (key === 38 || key === 40) {
        e.preventDefault();
      }
    }
  };

  // Add event listeners to document
  document.addEventListener('wheel', handleWheel, { passive: false });
  document.addEventListener('keydown', handleKeyDown);

  // Return cleanup function
  return () => {
    document.removeEventListener('wheel', handleWheel);
    document.removeEventListener('keydown', handleKeyDown);
  };
};

// Alternative hook-based approach for React components
export const useDisableNumberInputScroll = () => {
  React.useEffect(() => {
    const cleanup = disableNumberInputScroll();
    return cleanup;
  }, []);
};