How to block +,- and e in Number Input

Have you ever used number input and added special logic on onChange event to prevent +, – and e charterers saving to state. In this article we will gonna learn how to write a util function to block these +, – and e in your number input.

Problem

Let’s see below example.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input
        type="Number"
        value={value}
        onChange={({ target: { value } }) => {
          setValue(value);
        }}
      />
    </div>
  );
}

If you notice we are using a number input and it’s also working fine but we don’t want user to enter +, – and e while typing.

Solution

The solution is very straight forward. We will gonna write a reusable util function which basically gonna block invalid characters.

export const blockInvalidChar = e => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault();

We can simply import this function and use it on onKeyPress event.

import React, { useState } from "react";

import { blockInvalidChar } from "./blockInvalidChar";
import "./styles.css";

export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input
        type="Number"
        value={value}
        onKeyDown={blockInvalidChar}
        onChange={({ target: { value } }) => {
          setValue(value);
        }}
      />
    </div>
  );
}

How to use Formik with yup in React

Comments

[Saurabh Sharma]

I used to cast value to number explicitly using Number(e.target.value).

[Stephan Nijman]

I'm not sure if this is a problem in React, but in my experience with vanilla js and the onkeydown event it sometimes misses the last typed character (In some browsers). If you see this poblem just use the onkeyup event instead! :)

[Mariusz Wachowski]

When using onKeyDown user cannot use many keys like:

• TAB (move caret to next input)
• ALT+A (selecting all)
• CTRL+C/CTRL+V/CTRL+X
• arrows (up/down to add/subtract one, left right to move caret)
• home, end, page up, page down to move caret
• etc.

You should rather check value onChange.

[Ujjwal Thakur]

I used this, and it worked perfectly.

[Agustinus Nathaniel]

This is simple and useful!

[Carolina]

Could you try this on mobile please? On mobile it keeps accepting plus, minus and dot characters.

Thanks.

[Harsh Malviya]

This works fine when user is entering the value using keyboard.
But when the user scrolls the mouse on input this doesn't work. Is there a way to block that as well?

[vinay]

Add this -- >

const numberInputOnWheelPreventChange = (e: any) =>
{
// Prevent the input value change
e.target.blur();
// Prevent the page/container scrolling
e.stopPropagation();
// Refocus immediately, on the next tick (after the current
// function is done)
setTimeout(() => {
e.target.focus();
}, 0);
};