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

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

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML Attribute | placeholder</title>
    <style>
      input, textarea {
        padding: 10px;
        font-family: Georgia;
        width: 100%;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <p><input type="text" placeholder="Name"></p>
    <p><input type="password" placeholder="Password"></p>
    <p><textarea placeholder="Write Some Text." rows="5"></textarea></p>
  </body>
</html>

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

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

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

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

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

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

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

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

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

Category

Created on 2014-01-12 04:14 | Updated on 2017-07-05 21:21

Book

워드프레스 인기 테마