JavaScript focus() 메서드란?
JavaScript의 focus() 메서드는 HTML 폼 요소를 강조하고 활성화하는 데 사용됩니다. 이 메서드를 호출하면 해당 요소가 현재 문서의 활성(active) 요소로 설정되어, 사용자가 별도의 클릭 없이도 입력이나 상호작용을 바로 시작할 수 있습니다.
주목할 점은 focus()는 한 번에 오직 하나의 요소에만 적용된다는 것입니다. 새로운 요소에 포커스가 설정되면 기존에 포커스를 가지고 있던 요소는 자동으로 포커스를 잃게 됩니다. 텍스트 입력창뿐만 아니라 버튼, 링크 등 다양한 요소에 포커스를 적용할 수 있습니다.
문법(Syntax)
element.focus(options);
선택적으로 options 객체를 전달할 수 있으며, 대표적인 옵션으로는 포커스 시 화면 스크롤 여부를 제어하는 preventScroll이 있습니다.
예제 코드
다음 예제에서는 앵커 태그(<a>) 안에 있는 "Tutorialspoint"라는 텍스트에 id="focus"가 지정되어 있습니다. 버튼을 클릭하면 함수가 실행되어 DOM 메서드로 해당 요소를 가져온 뒤, focus() 메서드를 적용합니다. CSS의 :focus, :active 선택자 덕분에 포커스가 설정되면 텍스트 색상이 빨간색으로 변경됩니다.
<html>
<head>
<style>
a:focus, a:active {
color: red;
}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com/" id="focus">Tutorialspoint</a>
<input type="button" value="getfocus" onclick="getfo()">
<script>
function getfo() {
document.getElementById("focus").focus();
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 화면에 링크와 버튼이 표시됩니다.
이후 "getfocus" 버튼을 클릭하면 JavaScript가 링크 요소에 포커스를 설정하고, 아래와 같이 텍스트가 빨간색으로 바뀌는 것을 확인할 수 있습니다.
출력(Output)
