본문으로 바로가기

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로 설정해야 한다.