웹 폼을 만들다 보면 사용자가 입력 필드를 클릭(포커스)하는 순간, 미리 입력되어 있던 안내 문구나 기본값을 자동으로 지워야 하는 경우가 있습니다. 예를 들어 검색창에 "검색어를 입력하세요"라는 텍스트가 채워져 있다가, 사용자가 클릭하면 바로 사라지도록 하는 것이죠.
이러한 동작은 onfocus 이벤트 속성과 JavaScript를 활용해 아주 간단하게 구현할 수 있습니다. 포커스 이벤트가 발생하면 this.value='' 코드가 실행되어 해당 입력 필드의 값을 빈 문자열로 설정합니다.
예제 코드
<!DOCTYPE html> <html> <head> <title>포커스 시 입력 필드 지우기 예제</title> </head> <body> <h1>포커스 시 입력 필드를 지우는 예제</h1> <input type="text" onfocus="this.value=''" value="임의의 텍스트..."> <h2>위 필드를 클릭하면 값이 지워집니다</h2> </body> </html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
텍스트가 채워진 상태에서 해당 입력 필드를 클릭하면, onfocus 이벤트가 발생하면서 내부 값이 즉시 지워집니다.
동작 원리
핵심은 <input> 태그에 추가된 onfocus="this.value=''" 부분입니다. 사용자가 필드를 클릭하거나 Tab 키로 이동하여 포커스가 맞춰지면, 브라우저는 onfocus에 지정된 JavaScript 코드를 실행합니다. 여기서 this는 현재 입력 필드 자신을 가리키며, .value=''를 통해 그 값을 빈 문자열로 초기화합니다.
참고로 이 방식은 순수 CSS만으로는 구현할 수 없으며, JavaScript 이벤트 처리가 필요합니다. 또한 실무에서는 placeholder 속성을 사용하는 것이 더 권장되는데, 이는 별도의 스크립트 없이도 비슷한 UX를 제공하고 포커스가 벗어나면 안내 문구가 자동으로 복원되기 때문입니다.