HTML의 onfocus 이벤트 속성은 HTML 문서에서 특정 요소가 포커스(focus)를 받는 순간 지정된 스크립트를 실행하기 위해 사용됩니다. 예를 들어, 사용자가 입력 필드를 클릭하거나 Tab 키로 이동하여 해당 요소에 접근하는 순간 원하는 동작을 수행할 수 있습니다.
onfocus 속성이란?
onfocus는 폼 요소(input, textarea, select 등)와 링크(a 태그)처럼 포커스를 가질 수 있는 요소에서 주로 활용됩니다. 대표적인 활용 사례는 다음과 같습니다.
- 입력 필드가 선택될 때 배경색이나 테두리 강조
- 포커스 시 안내 문구나 도움말 표시
- 자동으로 값 초기화 또는 유효성 검사 준비
문법(Syntax)
onfocus 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname onfocus="script"></tagname>
여기서 script 부분에는 포커스를 받을 때 실행할 JavaScript 코드를 작성합니다.
예제(Example)
아래 예제는 textarea 요소에 onfocus 이벤트 속성을 적용한 사례입니다. 사용자가 텍스트 영역을 클릭해 포커스를 주면 배경색이 변경되도록 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
padding: 20px;
}
textarea {
border: 2px solid #fff;
background: transparent;
font-size: 1rem;
}
::placeholder {
color: #000;
font-size: 1rem;
}
</style>
</head>
<body>
<h1>HTML onfocus Event Attribute Demo</h1>
<textarea placeholder="Enter your message here" onfocus="focusFn()" rows='8' cols="50"></textarea>
<script>
function focusFn() {
document.querySelector('textarea').style.background = '#ffffff36';
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 브라우저에서 실행하면 다음과 같은 화면을 볼 수 있습니다.
이제 텍스트 영역을 클릭하여 메시지를 입력해 보세요. 요소가 포커스를 받는 순간 onfocus 이벤트가 발생하면서 배경색이 반투명 흰색으로 바뀌는 것을 확인할 수 있습니다.
정리
onfocus 이벤트 속성은 사용자가 요소에 진입하는 순간을 감지할 수 있는 강력한 도구입니다. onblur(포커스가 벗어날 때)와 함께 사용하면 입력 폼의 사용자 경험(UX)을 한층 더 향상시킬 수 있습니다.