React 에서 활성화된 focus 해제(blur) 방법. [feat. Typescript]

모바일 웹브라우저를 통해서 React로 작성된 웹페이지 이용할 때

input box에 텍스트 입력시 하단 영역에 키보드가 표시되게 됩니다.

보통은 입력완료하고 다음 단계 진행 시 해당 키보드 영역은 사라지게 되는데요.

 

여기서 입력하다가 중간에 다른 작업을 수행하려하려

키보드 영역을 사라지게 하고싶다면. 해당 input box에 onBlur 이벤트를 호출해주면 됩니다. 

아래와 같이 말입니다. (Typescript코드입니다. 그냥 React에서는 document.activeElement.blur() 해주면 됨)

function App() {
  const otherOneTouch = useCallback((event: TouchEvent) => {
  
  	(document.activeElement as HTMLElement).blur() // 현재 활성화된 element의 blur 이벤트 호출
  	 ...
     
  }, []);

  return (
    ...
  )
}

export default App;

** useCallback은 특정 이벤트를 처리하는 callback 함수 만들기 위한 Hook인데 신경쓰지 않으셔도 되구요.(무시하세요)

 

위와 같이 전역 DOM 객체인 document에서 위와 같이 blur() 함수를 강제로 호출하면 focus를 해제 할 수 있습니다.

따라서 모바일 브라우저의 경우엔 키보드 영역도 사라지게 됩니다.