HTML에서 요소가 포커스(focus)를 받았을 때 특정 스크립트를 실행하려면 onfocus 속성을 사용하면 됩니다. onfocus 속성은 사용자가 입력 필드를 클릭하거나 Tab 키로 이동하여 해당 요소에 초점이 맞춰지는 순간 지정된 JavaScript 함수를 호출합니다.
onfocus 속성의 동작 방식
onfocus는 주로 텍스트 입력창, 버튼, 링크 등 상호작용 가능한 요소에 활용됩니다. 예를 들어, 입력 필드가 선택되었을 때 배경색을 변경하거나 안내 메시지를 표시하는 등의 시각적 피드백을 제공할 수 있습니다.
예제 코드
다음 코드는 입력 필드에 포커스가 들어오면 해당 요소의 배경색을 파란색으로 변경하는 예제입니다. 직접 실행해 보세요.
<!DOCTYPE html>
<html>
<body>
<p>아래에 과목명을 입력하세요,</p>
과목: <input type = "text" id = "sname" onfocus = "display(this.id)">
<br>
<script>
function display(val) {
document.getElementById(val).style.background = "blue";
}
</script>
</body>
</html>코드 설명
위 예제에서 입력 필드에는 onfocus 속성이 설정되어 있으며, 포커스를 받으면 display(this.id) 함수가 호출됩니다. 이 함수는 getElementById()를 통해 해당 요소에 접근한 뒤, style.background 속성을 변경하여 배경색을 파란색으로 지정합니다.
이처럼 onfocus 속성을 활용하면 사용자가 어떤 요소를 선택하고 있는지 시각적으로 알려주는 등 다양한 인터랙티브 기능을 손쉽게 구현할 수 있습니다.