How To Create A Numbers Only Input Field In React.js

With React, you can do many things with HTML elements. In this article, I will show you how to create a numbers only input field in React.js. Read on it now.

Create A Numbers Only Input Field In React.js

Method 1: Using RegExpObject.test method

The test method will return true if it finds a match between the input value and the regular expression. Otherwise, it will return false.

Syntax:

RegExp.test(string)

Let’s take a look at this example:

export default function App() {
  const [inputValue, setinputValue] = useState('');

  const onChangeFunction = event => {
    const regExp = /^[0-9\b]+$/;
    if (event.target.value === '' || regExp.test(event.target.value)) {
      setinputValue(event.target.value);
    }
  };
  
   return (
     <div>
      <h3>686 Good morning 868</h3>
      <br></br>
      <div class="input-group input-group-lg">
        <span class="input-group-text" id="inputGroup-sizing-lg">Number Only</span>
        <input
          type="text"
          placeholder="Your fav number"
          value={inputvalue}
          onChange={onChangeFunction}
        />
      </div>
     </div>
   );
};

Output:

We use regular expression and the test() method in this example to check the input variable. The regular expression: ‘/^[0-9\b]+$/‘ ensures that the values ​​you enter contain only numbers from 0 to 9.

The test method is used in this case to check the input value. That’s why the value of the state variable inputValue is updated only when the input value is a digit.

Method 2: Using String.replace method

The string.replace() method finds a substring or a regular expression in the string and replaces it with a value provided by the user. The method will return the replaced string without changing the original String.

Syntax: 

string.replace(value1, value2)

Parameters:

• value1: the value to be searched for in the string.
• value2: the value that will be substituted for value1 in the new string returned by the method.

To illustrate, here is an example for you: 

export default function App() {
  const [inputValue, setinputValue] = useState('');

  const onChangeFunction = event => {
    const result = event.target.value.replace(/\D/g, '');

    setinputValue(result);
  };

  return (
    <div>
      <h3>686 Good morning 868</h3>
      <br></br>
      <div class="input-group input-group-lg">
        <span class="input-group-text" id="inputGroup-sizing-lg">Number Only</span>
        <input
          type="text"
          placeholder="Your fav number"
          value={inputvalue}
          onChange={onChangeFunction}
        />
      </div>
    </div>
  );
};

In this example, ‘\D‘ is used to search for non-numeric characters along with the global option via the ‘g‘ character. The replace method is responsible for removing all non-numeric characters in the input string.

Output:

Method 3: Using the input type number

The simplest way is to set the input tag’s type attribute to ‘number‘.

However, the disadvantage of this method is that you will not be able to remove the following characters:  ‘–‘, ‘.‘, ‘e‘.

export default function App() {
  const [inputvalue, setinputValue] = useState('');

  const onChangeFunction= event => {
    setinputValue(event.target.value);
  };

  return (
    <div>
      <h3>686 Good morning 868</h3>
      <br></br>
      <div class="input-group input-group-lg">
        <span class="input-group-text" id="inputGroup-sizing-lg">Number Only</span>
        <input
          type="number"
          placeholder="Your fav number"
          value={inputvalue}
          onChange={onChangeFunction}
        />
      </div>
    </div>
  );
};

Output:

The output shown above shows that the special characters still exist in the input box. You should pay attention to this when using an input type of ‘number‘. Therefore, I recommend using the above two methods instead of this one to get the best results.

Summary

So you finally know how to create a numbers only input field in React.js. I hope this article is helpful for you. If you have any questions or problems, please comment below. Thanks for reading!

Maybe you are interested:

• draw a horizontal line in React
• Get the Height of an Element using a Ref in React
• get window width and height in react

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js