IE9 이하에서 placeholder 속성 적용을 위한 대체방안 두번째 글입니다.
Placeholders.js 소개
HTML5 placeholder 속성을 위한 자바스크립트 폴리필이다. 가볍고 모든 브라우저에서 사용가능하다.
- input 요소와 textarea 요소에 적용된다.
- 브라우저의 기본적인(native)스타일을 렌더링하도록 노력하며, 스타일을 수정 가능하도록 placeholdersjs 라는 클래스를 추가한다.
- 기본적으로 placeholder 속성을 지원하는 브라우저에는 영향을 미치지 않는다.
- IE6+ 이상에서 작동하고 다른 추가적인 것들이 필요치 않으며 4kb의 작은 자바스크립트 파일로 구성된다.
- IE 8에서는 input 요소의 password 타입의 placeholder는 ****와 같이 표현된다.
- jQeury와 Protoype, YUI3 등으로 플러그인도 제공된다. 홈페이지에서 다운로드 가능하다.
Placeholders.js 사용법
HTML에서 사용할 폼 컨트롤을 생성한다.
<input type="text" name="name" placeholder="e.g. John Doe" />
<input type="password" name="password" placeholder="e.g. h4x0rpr00fz" />
<textarea name="message" placeholder="Your message goes here"></textarea>
placeholders.js를 다운로드 받아 페이지의 끝부분에 적절히 로드한다.
<script src="placeholders.min.js"></script>
Placeholders.js 옵션
<html> 요소에 data-* 속성 값을 이용해 추가기능을 설정할 수 있다.
data-placeholder-focus="false"IE에서는 input 요소에 포커스를 받으면 placeholder 글자가 사라지는데, false 값이 설정되면 포커스를 받아도 사라지지 않고 글자를 입력해야 사라진다.
data-placeholder-live="false"자바스크립트를 통해 변경하거나 로드후에 페이지에 새 요소를 추가할때 placeholder를 업데이트 하지 않으려면 false 값을 설정한다. 이 방법으로 페이지를 변경하지 않는다는 것을 인지하고 있다면 항상 false로 설정해야 한다.
'웹개발론 > 크로스브라우징' 카테고리의 다른 글
| 화면 깜빡임(FOUC) 문제해결 (3) | 2015.06.18 |
|---|---|
| In-Field Labels jQuery Plugin - 폼힌트 크로스브라우징 (0) | 2015.05.22 |
| HTML5 Placeholder jQuery Plugin - 폼힌트 크로스브라우징 (0) | 2015.05.22 |
| Modernizr - 브라우저 기능검사 (9) | 2015.05.21 |
| Respond.js - 미디어쿼리(Media Query) 크로스브라우징 (1) | 2015.05.21 |
