IE8 에서 placeholder 속성 적용

IE8은 공식적으로 HTML5 태그들을 지원하지 않는다. 따라서, 하위 버전의 IE들을 위해 Modernzr 라든가 html5shiv 같은 자바스크립트들을 이용하면 HTML5에서 새롭게 나타난 엘리먼트 태그들을 사용할 수 있다.

그럼에도 불구하고 placeholder 속성은 IE8에서 사용할 수 없는데, 이럴 때 사용할 수 있는 jQuery 플러그인이 있다. 이름하여jquery.placeholder. 사용법도 간단하다.

1 2	<script src="/path/jquery.placeholder.js"></script>

먼저 jQuery를 로딩한 다음 jquery.placeholder.js를 로딩한다. 그 다음에 다음과 같이 선언하면 끝.

1 2 3 4 5 6

(function ($) {   $(document).ready(function () {     $("input, textarea").placeholder();   }); })(jQuery);

참 쉽죠?

그런데, 이게 문제가 하나 있다. Bootstrap 이랑 함께 쓰면 <input type="password" ... /> 과 같은 패스워드형 input 엘리먼트는 레이아웃이 깨져 버린다. 그래서, 다 좋은데 이걸 쓰지 못하는 것이 참 안타까움. 결국 다른 것을 하나 더 발견했는데, 이것의 이름은placeholders.js.

이건 사용방법이 더 쉽다. jQuery 플러그인이 아니기 때문에 독립적으로 작동하는데 아래와 같이 스크립트만 불러오면 끝.

1 2	<script src="/path/Placeholders.js"></script>

둘 중 하나를 사용하면 IE8 에서도 placeholder 속성을 사용할 수 있다.