How to focus on the next field input in ReactJS ? - GeeksforGeeks

08 Apr, 2021
If we want to focus on the text input field when the current input field reaches its max character capacity, we have to find the next input HTML element and make it focus. Each time the user types in the current text field, we have to check whether the field has a max character that is specified. If yes, then we have to focus on the text input field. We can use focus() function to focus the particular input field.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder, i.e., foldername, move to it using the following command:
cd foldername
Project Structure: It will look like the following.
Example: We can see in the code, whenever we type in the input field, the handleChange function will be called, and it will decide whether the next field should be the focus or not based on the number of characters typed in the current input field. If it reaches max character then it will find the next field and make it focus. This is how the next input field focuses when the current input field hits the max characters limit.
App.js
import React from "react";  class App extends React.Component {  render() {    return (      <div>        <InputFields></InputFields>      </div>    );  }}  class InputFields extends React.Component {  handleChange = (e) => {    const { maxLength, value, name } = e.target;    const [fieldName, fieldIndex] = name.split("-");      let fieldIntIndex = parseInt(fieldIndex, 10);      // Check if no of char in field == maxlength    if (value.length >= maxLength) {        // It should not be last input field      if (fieldIntIndex < 3) {          // Get the next input field using it's name        const nextfield = document.querySelector(          `input[name=field-${fieldIntIndex + 1}]`        );          // If found, focus the next field        if (nextfield !== null) {          nextfield.focus();        }      }    }  };    render() {    return (      <div style={{ padding: 30 }}>        <InputFild name="field-1" length="3"                    handleChange={this.handleChange} />        <InputFild name="field-2" length="4"                    handleChange={this.handleChange} />        <InputFild name="field-3" length="3"                    handleChange={this.handleChange} />      </div>    );  }}class InputFild extends React.Component {  render() {    return (      <input        style={{ margin: 10 }}        type="text"        name={this.props.name}        maxLength={this.props.length}        onChange={this.props.handleChange}      ></input>    );  }}  export default App;
Output:
javascript-functions
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript