How to restrict an input field to only letters in React

The topic of this article will be how to restrict an input field to only letters in React. You can do this in several ways, for example, using the onKeyPress event or the test() function with the Regex method.

Restrict an input field to only letters in React

Using onKeyPress event

The onkeypress attribute is fired when the user presses a key (on the keyboard) on the tag. The onkeypress event does not fire with some keys (e.g., ALT, CTRL, SHIFT, ESC) in all browsers. To determine if the user pressed a key, you use the onkeydown event because it works with all keys. So we can use an event to check the input value.

Code:

import React from "react";

const App = () => {
    const handleOnKeyPress = (event) => {
        if (!(event.charCode >= 65 && event.charCode <= 122)) {
            alert("You can only enter letters");
        }
    };

    return (
        <div>
            <h2>Enter Name :</h2>
            <input
                type="text"
                onKeyPress={handleOnKeyPress}
                placeholder="Enter your name"
            />
        </div>
    );
};

export default App;

Output:

By accessing the event.charCode, we can get the character code of the button value just typed on the keyboard according to the ASCII table. We use an if conditional statement to check the values. If other than charCode from 65 to 122 are alphabetic values, it will notify the user on the screen that they have entered the wrong input format permission. So we can restrict an input field to only letters in React by checking the charCode of each input key value.

 Using the test() function with the Regex method

The test() method is used to check if a string contains a substring that matches the string pattern of the regular expression.

• If yes, return true.
• Otherwise, return false.

We can use this method to check the value of the input and test it through a regex that accepts only letter values ​​from a-z, lowercase, and uppercase. You can use this test() method with the input’s onChange event to test the input value continuously without interruption, like the example code below.

Code:

import React, { useState } from "react";

const App = () => {
    const [name, setName] = useState("");

    const handleOnChange = (event) => {
        const regex = /^[A-Za-z]+$/;
        if (event.target.value === "" || regex.test(event.target.value)) {
            setName(event.target.value);
        } else {
            alert("You can only enter letters");
        }
    };

    return (
        <div>
            <h2>Enter Name :</h2>
            <input
                type="text"
                value={name}
                onChange={handleOnChange}
                placeholder="Enter your name"
            />
        </div>
    );
};

export default App;

As you can see in the code above, we have a regex [A-Za-z] to check the input we want to test. Using the test() method in conjunction with a regex to check from a-z values ​​both uppercase and lowercase, if the string contains only letters, the return value will be true and false. So you can already use conditionals with this method to restrict an input field to only letters in React.

Summary

In summary, you have learned how to restrict an input field to only letters in React. However, you should use the test() method to combine regex to easily customize the regex to match the conditions of the problem.

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs