Placeholder 포커스시 감추기

HTML5의 placeholder 속성은 input 요소와 textarea 요소에 알맞은 힌트를 제공하는 목적으로 사용됩니다. 다만, 브라우저별로 해당 요소에 포커스가 될때 작동하는 방식에서 차이점이 발생합니다. 이를 하나로 통일하는 방법에 대해서 설명합니다.

브라우저별 placeholder 포커스 상태보기

IE처럼 포커스시 감추기

IE에서는 input 요소에 포커스를 받으면 placeholder 글자가 바로 사라지지만 다른 브라우저들은 포커스를 받고 글자를 실제로 입력해야 placeholder 글자가 사라진다. 이것을 IE와 같은 방식으로 통일되도록 구현해보자.

참고 : How do I auto-hide placeholder text upon focus using css or jquery?

위의 링크의 내용을 정리하면 아래와 같이 css를 삽입함으로 이를 처리할수 있다.

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder { /* WebKit browsers */
  color:transparent;
}

input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:transparent;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
  color:transparent;
}

국내에서 오랫동안 관습적으로 행해오던 방식은 IE와 같은 처리방식이다. IE를 다른 브라우저의 방식대로 구현하는 방법을 찾지 못했기에 굳이 통일해야 한다면 위의 코드가 도움이 될 것이다.

필자의 개인적인 생각으론 힌트를 제공함에 있어 해당 폼에 포커스가 맞춰져도 실제 글자를 입력하기 전까지 사라지지 않는 IE 이외의 브라우저의 작동방식이 더 마음에 든다.

만약에 placeholder 속성이 아닌 label을 이용하여 placeholder 효과를 구현중이라면 자바스크립트 이벤트를 이용하여 실제 입력값에 반응하는 input 이벤트에 관심을 가질만 하다. 물론, 당연하다는 듯이 구형 IE를 위한 대체방안을 마련해야 겠지만... 관련하여 추후에 포스팅을 할 예정이다.