React Js Text Input Allow Only Number | React Numeric Input

React Js Text Input Allow Only Number: In React.js, to allow only numbers in an input field, you can use event handling and regular expressions. First, attach an event handler, such as onKeyPress or onChange, to the input element. Then, in the event handler function, use JavaScript's event object to access the input value. You can use a regular expression to remove any non-numeric characters from the input value, such as letters or special characters, and set the cleaned value back to the input field using React's setState or useState hook. This ensures that only numbers are allowed in the input field, as any non-numeric characters will be automatically removed as the user types or pastes input into the field.

written

reviewed

updated

How can you restrict a React JS text input field to accept only numerical values?

This is a React JS component that allows only numeric input in a text input field. The component maintains two state variables, one for the input value and the other for the error message.

The filterNonNumeric function is called every time the value of the input field changes. This function uses a regular expression to replace all non-numeric characters with an empty string. If the resulting input is different from the original input, it means that non-numeric characters were present and an error message is set accordingly. Otherwise, the input is considered valid, and the error message is cleared. The filtered input value is then stored in the state variable.

The component returns a div element that contains a header, an input element, and an error message (if present). The input element is bound to the numericInput state variable, and the onChange event is set to call the filterNonNumeric function. If the errorMessage state variable is not empty, a div element is rendered with red color text to display the error message.

Overall, this component provides a simple and effective way to enforce numeric input for a text field in a React application.

React Js Text Input Allow Only Number Example

<script type="text/babel">
        const { useState } = React;
        function App() {
            const [numericInput, setNumericInput] = useState("");
            const [errorMessage, setErrorMessage] = useState("");

            const filterNonNumeric = (e) => {
                // Replace non-numeric characters with an empty string
                let input = e.target.value.replace(/[^0-9]/g, "");
                if (input !== e.target.value) {
                    // Input was invalid, set error message
                    setErrorMessage("Only numeric characters are allowed.");
                } else {
                    // Input was valid, clear error message
                    setErrorMessage("");
                }
                setNumericInput(input);
            };

            return (
                <div>
                    <h3>React Js Text Input allow Only Number</h3>
                    <input
                        type="text"
                        value={numericInput}
                        onChange={filterNonNumeric}
                    />
                    {errorMessage && <div style={{ color: "red" }}>{errorMessage}</div>}
                </div>
            );
        }
        ReactDOM.render(<App />, document.getElementById("app"));
</script>

Run

React JS Tutorial

React Js Text Input Allow Only Number | React Numeric Input

How can you restrict a React JS text input field to accept only numerical values?

React Js Text Input Allow Only Number Example

Output of React Js Input Allow Only Number

React JS Tutorial

React Js Text Input Allow Only Number | React Numeric Input

Feedback for Abhishek

How can you restrict a React JS text input field to accept only numerical values?

React Js Text Input Allow Only Number Example

Output of React Js Input Allow Only Number