개요
웹 페이지에서 입력 필드에 안내 문구(힌트)를 미리 표시해 두고, 사용자가 마우스 커서로 해당 필드를 클릭하면 힌트가 자동으로 사라지도록 만들고 싶은 경우가 있습니다. 이럴 때 onFocus(포커스 얻기)와 onBlur(포커스 잃기) 이벤트를 활용하면 아주 간단하게 구현할 수 있습니다.
입력 요소 준비하기
다음과 같은 입력 텍스트 상자가 있다고 가정해 보겠습니다.
<label for="name">StudentName:<input name="name" id="studentName"
value="Enter your Name ??????" class="guess"></label>여기서는 value 속성에 "Enter your Name ??????"라는 힌트 문구가 들어가 있으며, 이 값이 기본값(defaultValue) 역할을 합니다.
동작 원리
- onFocus: 사용자가 텍스트 상자를 클릭해 포커스를 얻는 순간, 현재 값이 기본값과 같다면 값을 빈 문자열(
'')로 바꿔 힌트를 제거합니다. - onBlur: 사용자가 아무것도 입력하지 않은 채 다른 곳을 클릭해 포커스를 잃으면, 빈 값일 경우 기본 힌트 문구를 다시 되돌려 놓습니다.
전체 예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="name">StudentName:<input name="name" id="studentName"
value="Enter your Name ??????" class="guess"></label>
<script>
function guessFocus() {
if (this.value == this.defaultValue)
this.value = '';
}
function guessBlur(event) {
if (this.value == '')
this.value = this.defaultValue;
}
var event = document.getElementById('studentName');
event.onfocus = guessFocus;
event.onblur = guessBlur;
</script>
</body>
</html>코드를 살펴보면 guessFocus() 함수에서 this.value == this.defaultValue 조건으로 사용자가 직접 입력한 내용이 아니라 힌트 문구인지 판별한 뒤 지우고, guessBlur() 함수에서는 값이 비어 있을 때만 힌트를 복원합니다. 덕분에 사용자가 실제 이름을 입력한 경우에는 포커스가 이동해도 입력 내용이 그대로 유지됩니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 뒤, 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 에디터를 사용 중이라면 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.
결과
프로그램을 실행하면 화면에 학생 이름(StudentName) 입력 필드가 표시되며, 초기 상태에는 "Enter your Name ??????"라는 힌트가 보입니다.
이제 텍스트 상자 안쪽을 마우스로 클릭하면 해당 필드가 포커스를 얻으면서 힌트 문구가 사라지고, 커서를 깜박이며 새로운 입력을 기다립니다. 반대로 아무것도 입력하지 않은 채 밖을 클릭하면 힌트가 다시 나타납니다.
참고: 최신 방식인 placeholder 속성
참고로 HTML5에서는 위와 같은 스크립트 작업 없이 <input placeholder="Enter your Name">처럼 placeholder 속성만으로 동일한 효과를 낼 수 있습니다. 다만 구형 브라우저 호환성이 필요하거나, 힌트 외에 추가 로직(색상 변경, 유효성 검사 등)을 함께 처리해야 하는 경우에는 본문처럼 onFocus/onBlur 이벤트를 직접 제어하는 방식이 여전히 유용합니다.