DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Narender Saini
Narender Saini

Posted on

How to block +,- and e in Number Input

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.

How to block +,- and e in Number Input

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 block +,- and e in Number Input

Edit k63s4

How to use Formik with yup in React

Top comments (4)

Collapse
 
itsjzt profile image
Saurabh Sharma

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

Collapse
 
vanaf1979 profile image
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! :)

Collapse
 
wysher profile image
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.

Collapse
 
thakurujjwal profile image
Ujjwal Thakur

I used this, and it worked perfectly.

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs