HTML DOM focus() 메서드란?
HTML DOM의 focus() 메서드는 지정된 HTML 요소에 포커스(focus)를 부여하는 데 사용됩니다. 다만 모든 HTML 요소에 포커스를 적용할 수 있는 것은 아니며, 예를 들어 <p> 태그에는 포커스를 줄 수 없습니다. 반대로 요소에서 포커스를 제거하려면 blur() 메서드를 사용하면 됩니다.
구문(Syntax)
focus() 메서드의 기본 구문은 다음과 같습니다.
HTMLElementObject.focus()
예제
focus() 메서드의 실제 동작을 확인할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text]:focus, p:active {
color: blue;
font-size:35px;
background-color:lightpink;
border:2px solid blue;
}
input[type=text]{
color:black;
font-size:20px;
}
</style>
<script>
function enableFocus() {
document.getElementById("USR1").focus();
}
function disableFocus() {
document.getElementById("USR1").blur();
}
</script>
</head>
<body>
<h1>focus() method example</h1>
<label>USERNAME :<input id="USR1" type="text" size=5 maxlength=10></label>
<br><br>
<input type="button" onclick="enableFocus()" value="FOCUS">
<input type="button" onclick="disableFocus()" value="BLUR">
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
FOCUS 버튼을 클릭한 경우 −
BLUR 버튼을 클릭한 경우 −
예제 상세 설명
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
먼저 id가 “USR1”인 텍스트 입력 상자를 생성하고, size 속성값은 5, maxlength 속성값은 10으로 각각 지정했습니다.
<label>USERNAME :<input id="USR1" type="text" size=5 maxlength=10></label>
다음으로, 텍스트 상자에 포커스가 있거나 활성화(active)된 상태와 그렇지 않은 상태에 대해 서로 다른 CSS 스타일 두 가지를 정의했습니다.
input[type=text]:focus, input[type=text]:active {
color: blue;
font-size:35px;
background-color:lightpink;
border:2px solid blue;
}
input[type=text]{
color:black;
font-size:20px;
}그런 다음 FOCUS와 BLUR 두 개의 버튼을 만들어, 사용자가 클릭하면 각각 enableFocus() 함수와 disableFocus() 함수가 실행되도록 구성했습니다.
<input type="button" onclick="enableFocus()" value="FOCUS"> <input type="button" onclick="disableFocus()" value="BLUR">
enableFocus() 함수는 getElementById() 메서드로 해당 입력 요소를 가져온 뒤 focus() 메서드를 호출하여 텍스트 상자에 포커스를 설정합니다. 이때 :focus 스타일이 적용되어 텍스트 상자의 색상, 크기, 배경색, 테두리가 변경됩니다. 반면 disableFocus() 함수는 id가 “USR1”인 입력 요소를 가져와 blur() 메서드를 호출함으로써 포커스를 제거합니다. 포커스가 해제되면 텍스트 상자는 기본 CSS 스타일로 되돌아갑니다.
function enableFocus() {
document.getElementById("USR1").focus();
}
function disableFocus() {
document.getElementById("USR1").blur();
}활용 팁
focus() 메서드는 폼 유효성 검사 후 오류가 발생한 입력 필드로 사용자의 시선을 유도하거나, 페이지 로드 시 자동으로 검색창·로그인 입력란에 커서를 위치시키는 등 다양한 UX 개선 상황에서 활용됩니다. 또한 <div>처럼 기본적으로 포커스를 받을 수 없는 요소에는 tabindex 속성을 추가하면 focus() 메서드로 포커스를 설정할 수 있습니다.