[Book Buddy / Function] input 자동 탭 기능 만들기

여러 사이트를 이용할 때 가끔 정말 불편하다고 느끼는 사이트가 있었다. 

전화번호 앞번호 뒷번호를 따로 입력하게끔 만들어놓고 자동 탭이 되지 않는 사이트들...

 

나는 키보드 오른쪽 숫자키들을 애용하기도 하고 아무 생각 없이 외우고 있는 번호를 우다다 누르는데 자동 탭이 되지 않는다? UX적으로 정말 불편하다고 느꼈었다. 그래서 막상 내가 전화번호 입력란을 만들게 되니 반드시 자동 탭을 만들어야겠다 싶었다.

 

클릭하지 않아도 앞 4자리를 입력하면 다음 칸으로 넘어간다

 

찾아보니 .focus로 해결할 수 있겠다. 간단하게 전화번호 앞 자리 입력이 끝나면 dom 에 접근해서 직접 .focus를 주면 될 듯 하다. 

 

먼저 dom에 접근. useRef를 써야한다. 

앞 자리 입력이 끝나면 뒷 자리에 focus 되도록 해야하므로 뒷 자리를 받는 input을 ref에 저장한다.

 

  // 변수 선언
  const number2Ref = useRef<HTMLInputElement>(null);
  
  // 전화번호 뒷자리 input
    <Styled_PhoneNumber.Input
      // (중략..)
      ref={number2Ref}
    />

 

저장한 input 으로 탭이 넘어가는 조건을 어떻게 잡을까 하다가 앞자리가 4글자가 되면 넘어가게끔 하기로 했다. 

e.target.value로 받은 입력값이 4이면서 ref.current가 존재하면(null 방지) ref.current에 .focus를 주는 함수를 짠 후 전화번호 앞 자리를 받는 input에 함수를 연결해준다. 

 

  /** 전화번호 앞자리 입력시 뒷자리로 자동 탭 해주는 함수  */
  const autoTab = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.value.length === 4 && number2Ref.current) {
      number2Ref.current.focus();
    }
  };

 // 전화번호 앞 자리를 받는 input
   <Styled_PhoneNumber.Input
      // (중략..)
      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
        autoTab(e);
      }}
    />

 

 

완성~

전화번호 자동 탭 안 되는 사이트들 탭 기능좀 넣어주세요... ㅠㅠ 불편쓰

 

 

 

 

---

참고자료

https://han-py.tistory.com/454