어린왕자와 여우

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

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

<input type="text" placeholder="Name">

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

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

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

• https://github.com/mathiasbynens/jquery-placeholder
• http://jamesallardice.github.io/Placeholders.js/

첫번째 스크립트는 jQuery 기반이고, 두번째 스크립트는 단독으로 사용할 수 있습니다. 좀 더 간편한 Placeholders.js로 테스트해보겠습니다. http://jamesallardice.github.io/Placeholders.js/에서 placeholders.min.js를 다운로드 받습니다. 그리고 HTML 문서에 연결시킵니다.

<script src="placeholders.min.js"></script>

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

출처 : http://www.cmsfactory.net/node/10224