Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML DOM blur() 메서드 완벽 정리 – 요소의 포커스를 제거하는 방법

HTML DOM의 blur() 메서드는 특정 HTML 요소에서 키보드 포커스(focus)를 제거할 때 사용됩니다. 이 메서드를 활용하면 사용자 입력이나 버튼 클릭과 같은 이벤트에 따라 원하는 요소에 포커스를 주거나 빼앗을 수 있어, 웹페이지 내 탐색 경험을 한층 더 개선할 수 있습니다.

문법(Syntax)

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

Object.blur()

별도의 매개변수 없이 호출만 하면 해당 요소의 포커스가 즉시 해제됩니다.

예제(Example)

blur() 메서드가 실제로 어떻게 동작하는지 예제를 통해 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    a{
        text-decoration:none;
        font-size:20px;
    }
    a:focus, a:active {
        color: red;
        text-decoration:underline;
        font-size:40px;
    }
</style>
</head>
<body>
<a id="Anchor" href="https://example.com">example.com</a>
<p>포커스를 주거나 제거해 보세요…</p>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
<script>
    function getfocus() {
        document.getElementById("Anchor").focus();
    }
    function losefocus() {
        document.getElementById("Anchor").blur();
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 링크와 두 개의 버튼이 화면에 표시됩니다.

[Get focus] 버튼을 클릭한 경우

링크에 포커스가 설정되면서 a:focus, a:active 스타일이 적용되어 글자 색이 빨간색으로 바뀌고, 밑줄이 생기며 글자 크기가 40px로 커집니다.

[Lose focus] 버튼을 클릭한 경우

blur() 메서드가 실행되어 포커스가 해제되고, 링크는 처음의 기본 스타일로 되돌아갑니다.

코드 상세 설명

1. 앵커 태그 생성

먼저 id가 "Anchor"인 앵커(<a>) 태그를 생성했습니다.

<a id="Anchor" href="https://example.com">example.com</a>

2. CSS 스타일 정의

포커스 상태와 비포커스 상태를 시각적으로 구분하기 위해 두 가지 스타일을 정의했습니다.

a{
    text-decoration:none;
    font-size:20px;
}
a:focus, a:active {
    color: red;
    text-decoration:underline;
    font-size:40px;
}

기본 상태에서는 밑줄 없는 20px 크기의 링크로 표시되고, 포커스 또는 활성화 상태에서는 빨간색 밑줄과 함께 40px로 확대됩니다.

3. 버튼 생성

각각 getfocus() 함수와 losefocus() 함수를 호출하는 두 개의 버튼을 만들었습니다.

<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">

4. getfocus() 함수

getfocus() 함수는 id가 "Anchor"인 요소를 가져온 뒤 focus() 메서드를 실행하여 해당 링크에 포커스를 부여하고, a:focus, a:active 스타일을 적용합니다.

function getfocus() {
    document.getElementById("Anchor").focus();
}

5. losefocus() 함수

losefocus() 함수는 같은 방식으로 "Anchor" 요소를 가져온 후 blur() 메서드를 실행합니다. 그러면 링크에서 포커스가 사라지고 <a> 요소의 원래 기본 스타일로 복원됩니다.

function losefocus() {
    document.getElementById("Anchor").blur();
}

마무리

blur() 메서드는 focus() 메서드와 짝을 이루어 사용되며, 폼 유효성 검사 후 잘못된 입력 필드에서 포커스를 옮기거나, 모달 창이 닫힐 때 포커스를 해제하는 등 다양한 UI 인터랙션 구현에 유용하게 활용됩니다. 두 메서드를 함께 익혀두면 사용자 경험을 고려한 웹 개발에 큰 도움이 됩니다.