HTML DOM hasFocus() 메서드 – 문서 포커스 상태 확인 방법

HTML DOM의 hasFocus() 메서드는 현재 문서(document) 또는 문서 내부의 요소가 포커스를 가지고 있는지 확인할 때 사용됩니다. 이 메서드는 불리언(Boolean) 값을 반환하며, true는 문서 또는 요소가 포커스를 갖고 있음을, false는 그렇지 않음을 의미합니다.

문법

hasFocus() 메서드의 기본 문법은 다음과 같습니다.

document.hasFocus()

예제

hasFocus() 메서드의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>hasFocus() method</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button id="BTN1" >CHECK </button>
<script>
    setInterval("checkFocus()", 20);
    function checkFocus() {
        var b = document.getElementById("BTN1");
        if (document.hasFocus()) {
            b.innerHTML = "FOCUSED";
        } else {
            b.innerHTML = "NOT FOCUSED";
        }
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

HTML DOM hasFocus() 메서드 – 문서 포커스 상태 확인 방법

문서 내 아무 곳이나 클릭하면 버튼의 텍스트가 NOT FOCUSED에서 FOCUSED로 변경됩니다.

HTML DOM hasFocus() 메서드 – 문서 포커스 상태 확인 방법

코드 설명

위 예제의 동작 원리를 자세히 살펴보겠습니다.

먼저 checkFocus() 함수를 생성하고, getElementById() 메서드를 사용하여 버튼 요소를 가져옵니다. 그다음 hasFocus() 메서드를 호출하여 문서에 포커스가 있는지 확인한 뒤, 반환 값에 따라 조건문을 실행합니다. 즉, document.hasFocus()가 true를 반환하면 버튼에 "FOCUSED"가 표시되고, false를 반환하면 "NOT FOCUSED"가 표시됩니다.

function checkFocus() {
    var b = document.getElementById("BTN1");
    if (document.hasFocus()) {
        b.innerHTML = "FOCUSED";
    } else {
        b.innerHTML = "NOT FOCUSED";
    }
}

문서를 클릭하면 항상 포커스를 얻게 되므로, 실시간으로 포커스 상태 변화를 감지하기 위해 setInterval() 메서드를 활용했습니다. 이 메서드는 20밀리초마다 checkFocus() 함수를 반복 실행하여 현재 문서가 포커스를 가지고 있는지 지속적으로 확인합니다.

setInterval("checkFocus()", 20);

정리

hasFocus() 메서드는 브라우저 탭 전환 감지, 사용자 입력 유효성 검사, 자동 저장 기능 구현 등 다양한 상황에서 유용하게 활용할 수 있습니다. 특히 백그라운드로 전환된 탭에서 불필요한 작업을 중단하거나, 사용자가 페이지를 보고 있는지 여부에 따라 UI를 동적으로 변경해야 할 때 매우 효과적입니다.