Skip to content
Advertisement

React: How to prevent user from entering ‘e’, ‘+’ and ‘-‘ for input type=”number”

I have an input and can filter any letter if the input type is ‘text’. Also, I’m listening to an onKeyUp event to increment/decrement the input value.

But there are 2 issues with this approach:

  1. The text input does not show up/down buttons on the right side.

  2. When the user presses the ‘ArrowUp’ button, the cursor ‘jumps’ back and forth (to the beginning of the input and then jumps back to the end of it).

When I try to implement the same logic for numeric input, the value coming from it is empty when the user types “e”. EG: ’12e’ will be identified as “” (empty string). That would be acceptable, but I want the user to be able to delete any values he/she entered by selecting the range and pressing the “delete” button.

Here is the code example I created to demonstrate the issue:

https://codesandbox.io/s/peaceful-mcclintock-gd74y

Update:

According to an answer from Martin Wahlberg we should listen to an onKeyDown event. Here is the working version that filters “e”,”-” and “+”. Might be useful for someone who faced the same issue.

https://codesandbox.io/s/throbbing-fast-5u2qq

Thanks for the help!

Advertisement

Answer

This should work:

const onNumberInputChange = useCallback(({ target: { value } }) => {
    if(!/d*/.test(value)) return
    setFilteredValue(value);
    setUnfilteredValue(value);
  }, []);  const onNumerInputKeyDown = (event) => {
if(event.key === "e") event.preventDefault();

}

And if you update your number input to use this function on keyDown we should be able to stop the user from inputing e aswell

const onNumerInputKeyDown = (event) => {
    if(event.key === "e") event.preventDefault();
  }

Here the user will be able to delete their input completely and the user is prevented from using e.

Advertisement