IE8, IE9에서 placeholder 적용되게 하는 방법

input이나 textarea에 placeholder 속성으로 어떤 내용을 입력할 지 안내할 수 있습니다. HTML5에 새로 추가된 속성으로 label을 대체할 수 있는 유용한 속성입니다.

placeholder를 이용한 간단한 예는 다음과 같습니다.

그런데 문제가 있습니다. IE9 이전 버전에서는 지원하지 않는다는 것입니다. 다음과 같이 공백으로 나옵니다.

IE8과 IE9는 아직도 많이 사용하는 웹브라우저이므로, 이처럼 빈칸으로 나오면 placeholder를 사용할 수 없습니다. 하지만, 이를 해결해주는 스크립트를 이용해서 해결할 수 있습니다.

두가지 스크립트가 있는데, URL은 다음과 같습니다.

첫번째 스크립트는 jQuery 기반이고, 두번째 스크립트는 단독으로 사용할 수 있습니다. 좀 더 간편한 Placeholders.js로 테스트해보겠습니다.

http://jamesallardice.github.io/Placeholders.js/에서 placeholders.min.js를 다운로드 받습니다. 그리고 HTML 문서에 연결시킵니다.

끝입니다. 너무 간단하죠? IE9에서의 결과는 다음과 같습니다.

IE8에서의 결과는 다음과 같습니다.

안타깝게도 password 타입의 input은 제대로 나오지 않네요. 그나마 비밀번호라는 것을 알 정도로는 나옵니다.