[input 자동 넘기기] Input의 길이만큼 입력했을 때, 다음 Input으로 자동 넘기기

아직 퍼블리싱 완성 전...

많은 사이트를 보면 위 사진처럼

입력창이 연달아 있는 걸 볼 수 있다.

이때, 사용자 편의를 위해 입력이 완료되면 자동으로 넘어가게 해보자.

 

🎈 완성 코드

import Image from "next/image";
import styles from "@/styles/bookNLife.module.scss";
import classNames from "classnames/bind";
import { useState, useRef } from "react";
const cn = classNames.bind(styles);

const BookNLife = ({ item, seq }) => {
  // 도서상품권 div 추가
  const [inputGroups, setInputGroups] = useState({
    card1: "",
    card2: "",
    card3: "",
    card4: "",
    card5: "",
  });

  const inputRefs = {
    card1: useRef(null),
    card2: useRef(null),
    card3: useRef(null),
    card4: useRef(null),
    card5: useRef(null),
  };

  const handleBookNLifeCard = (e) => {
    setInputGroups({ ...inputGroups, [e.target.name]: e.target.value });

    if (e.target.value.length === 4) {
      switch (e.target.name) {
        case "card1":
          inputRefs.card2.current.focus();
          break;
        case "card2":
          inputRefs.card3.current.focus();
          break;
        case "card3":
          inputRefs.card4.current.focus();
          break;
        case "card4":
          inputRefs.other.current.focus();
          break;
        default:
          break;
      }
    }
  };

  return (
    <div className={cn("eBookNLife")}>
      <div className={cn("top")}>
        <div className={cn("textBox")}>
          <p>도서문화상품권 핀(PIN)번호를 입력해주세요.</p>
          <p>1000원당 940P로 전환되어 사용됩니다.</p>
        </div>
      </div>
      <div className={cn("box")}>
        <div className={cn("middle")}>
          <input
            ref={inputRefs.card1}
            type="text"
            maxLength={4}
            name="card1"
            onChange={(e) => handleBookNLifeCard(e)}
          />
          <input
            ref={inputRefs.card2}
            type="text"
            maxLength={4}
            name="card2"
            onChange={(e) => handleBookNLifeCard(e)}
          />
          <input
            ref={inputRefs.card3}
            type="text"
            maxLength={4}
            name="card3"
            onChange={(e) => handleBookNLifeCard(e)}
          />
          <input
            ref={inputRefs.card4}
            type="text"
            maxLength={4}
            name="card4"
            onChange={(e) => handleBookNLifeCard(e)}
          />
          <input
            ref={inputRefs.card5}
            type="text"
            maxLength={4}
            name="other"
            onChange={(e) => handleBookNLifeCard(e)}
          />
        </div>
      </div>
      <p className={cn("warning")}>유효하지 않은 상품권 번호입니다.</p>
      <button className={cn("check")}>등록하기</button>
    </div>
  );
};

export default BookNLife;

 

🎆 풀이

각 input에 대한 ref를 참조하고,

원하는 길이에 도달 했을 때, 다음으로 포커스가 넘어가는 방식이다.