HTML5 input 클릭하면 글씨가 사라지고 바탕을 누르면 다시 표시되게 하는 방법
제목이 좀 매끄럽지 못한데, 이렇게 검색들을 많이 하실까봐서 정해봤습니다. 저 역시 이 방법을 찾으려고 무수히 많은 검색들을 했었습니다. 결국 답을 찾았고 저처럼 고생하시지 마시라고 깔끔하게 정리해서 올려보겠습니다.
구글 메인화면을 가보시면 구글 로고와 함께 바로 아래에 검색창이 있습니다. 그리고 검색창에는 "Google 검색 또는 URL 입력" 이라고 글씨가 표시되어 있습니다. 여기를 클릭하면 이 글씨가 사라집니다. 그리고 검색창을 제외한 바탕 아무곳에나 클릭을 하면 다시 이 글씨가 생성됩니다. 어떻게 처리를 하는 걸까요?
자바스크립트에서 처리를 하기도 하지만, 일단 저는 스크립트와 별로 친하지 않아서 이 방법까지는 모르구요, HTML5에서 새로 추가된 기능만으로도 구현할 수 있습니다. 먼저 아래의 예시에서 직접 확인해 보세요. 그리고 HTML, CSS 버튼을 누르셔서 직접 코딩 상태도 확인해 보시기 바랍니다.
See the Pen input type="search" : Google Searching Style by rgy0409 (@rgy0409) on CodePen.
확인해 보셨나요? 핵심 기술은 바로 input 요소안에 있는 스타일에 있습니다.
<input class="gSearch" type="search" size="60" placeholder="Google 검색 및 URL 입력" onfocus="this.placeholder=''" onblur="this.placeholder='Google 검색 및 URL 입력'" name="search">
못찾으신 분들을 위해서 input 부분만 다시한번 살펴봅니다. 살펴보시면 아래의 세 가지를 확인하실 수 있습니다.
placeholder / onfocus / onblur 이 세가지를 기억하라!
placeholder="Google 검색 및 URL 입력" ▶ 큰 따옴표 안의 문구가 표시됨
onfocus="this.placeholder=''" ▶ 클릭했을 때, placeholder 의 문구를 사라지게 함
onblur="this.placeholder='Google 검색 및 URL 입력'" ▶ input 창을 제외한 다른곳을 클릭했을 때, 작은 따옴표 안의 글씨가 다시 출력됨
이렇게 세가지의 옵션만 기억해 주세요. 중요한건 CSS3에서는 지원을 하지 않습니다. HTML5 부터 새로 추가된 옵션들 입니다. 따라서 직접 인라인 방식으로 input 요소에 직접 작성해 주시면 됩니다. 끝.
"친절한효자손 취미생활" 을 검색!
