[React] 활성화된 input focus 해제 / blur()

input을 핸들링 하면서 엔터 입력 등

어떠한 이벤트 이후 데이터 처리가 되면서 focus를 해제하고 싶을 때가 있다.

 

 

1. event.target을 이용한 fucus해제

const onKeyDown = (event) => {
    if (event.key === "Enter") {
      // 데이터 처리 코드 작성
      event.target.blur();
    }
  };
  
  return (
      <>
          <input
            onKeyDown={onKeyDown}
          />
      </>
  )

 

 

20 useRef를 이용한 focus해제

const inputRef = useRef();

const onKeyDown = (event) => {
    if (event.key === "Enter") {
      // 데이터 처리 코드 작성
      inputRef.current.blur();
    }
  };
  
  return (
      <>
          <input
            ref={inputRef}
            onKeyDown={onKeyDown}
          />
      </>
  )

 

 

 

 

 

3. 전역객체인 document에서 강제로 blur()함수를 호출

document.activeElement.blur();

모바일의 경우 키보드 영역도 사라진다.