DOM 요소가 현재 포커스(활성화)되었는지 알아내는 방법은?

21,292
View Count

주소 복사하기

특정 DOM 요소가 방문자에 의하여 활성화 중인지 알아낼 수 있는 방법은 무엇일까요? 예를들어 어떤 아이디를 입력하는 input 태그가 현재 focus 되고 있는지 알아내는 방법은 없을까요?

# document.activeElement 사용하기
만약 어떤 요소가 현재 사용자에 의하여 포커스 되었는지 알고 이를 확인할 경우 document.activeElement를 사용합니다. 예를들어 닉네임을 얻기 위하여 input 태그를 제공하는 경우 사용자가 input에 입력 또는 포커스 중인지 확인이 가능합니다.

document.activeElement 속성은 현재 포커스 중인 DOM 요소를 찾아 반환하여 줍니다. 즉 input에 입력중인 경우 input 태그가 반환됩니다.

<span>닉네임을 입력하세요!</span>
<input id='nicknameForm' type='text' />

만약 입력중에 아래 스크립트를 실행하면 어떻게 될까요?

<script>
focusEle = document.activeElement;
if (document.getElementById('nicknameForm') == focusEle) {
  console.log(true);
}
</script>

현재 입력중인 input과 activeElement 속성으로 얻은 요소가 동일하므로 true를 출력합니다.

아래의 글도 찾고 계시지 않나요?

자바스크립트를 사용하여 텍스트를 html 요소로 변경하는 방법은?

html에서 주석 node만 가져오는 방법은?