[HTML] input 태그 클릭 시 placeholder 내용 숨기기

input 태그를 사용할 때 태그 부분을 클릭하면 placeholder 내용이 사라지고 커서가 생기고, 다시 태그 밖을 클릭하면 placeholder 내용이 생기는 걸 구현해보겠습니다.

구글링 해보니 스크립트로 구현하시는 분이 많으시던데, 스크립트 없이 html 태크 안에서 해결하는 방법을 찾았습니다.

 

<input type="text" placeholder="ID" onfocus="this.placeholder=''" onblur="this.placeholder='ID'" class="input">
<input type="password" placeholder="Password" onfocus="this.placeholder=''" onblur="this.placeholder='Password'" class="input">

 

간단하게 onfocus, onblur 속성을 이용해 해결했습니다.