자바스크립트 focus() 메서드란?
자바스크립트의 focus() 메서드는 해당 요소가 포커스를 받을 수 있는 경우에만 그 요소에 포커스를 설정하는 데 사용됩니다. 예를 들어, 텍스트 입력 필드(input), 버튼(button), 링크(a)처럼 사용자 입력을 받을 수 있는 요소에 포커스를 이동시킬 때 활용됩니다.
이 메서드는 폼 자동 완성, 접근성 향상, 사용자 경험 개선 등 다양한 상황에서 유용하게 쓰입니다.
focus() 메서드 기본 문법
element.focus();
선택적으로 포커스 옵션 객체를 전달할 수도 있습니다.
element.focus({ preventScroll: true }); // 포커스 시 스크롤 이동 방지자바스크립트 focus() 메서드 예제 코드
다음은 버튼을 클릭하면 텍스트 입력 필드에 포커스가 설정되는 간단한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript focus()</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript focus()</h1>
<input type="text" class="sample">
<button class="Btn">CLICK HERE</button>
<h3>
위의 버튼을 클릭하면 입력 필드에 포커스가 설정됩니다.
</h3>
<script>
let sampleEle = document.querySelector(".sample");
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.focus();
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
“CLICK HERE” 버튼을 클릭하면 텍스트 입력 필드에 커서가 자동으로 위치하며, 포커스 상태임을 확인할 수 있습니다.
정리
focus() 메서드는 요소가 포커스 가능(focusable)한 경우에만 동작한다는 점을 기억하세요. div나 span처럼 기본적으로 포커스를 받을 수 없는 요소에는 tabindex 속성을 추가해야 focus()가 정상적으로 작동합니다. 또한 반대로 포커스를 제거하고 싶을 때는 blur() 메서드를 사용하면 됩니다.