HTML5 Placeholder jQuery Plugin - 폼힌트 크로스브라우징

HTML5에 새로 추가된 속성인 placeholder라는 속성을 이용하여 input 요소에 힌트를 제공할 수 있습니다. IE9 이하에서는 제대로 작동하지 않기 때문에 이를 극복하기 위해서 몇가지 대체방안을 살펴봅니다. 그 중 첫번째 글입니다.

HTML5 Placeholder jQuery Plugin 소개

IE9 이하 버전에서 placeholder를 구현하기 위해 jQuery로 만든 플러그인이다.

REPO

https://github.com/mathiasbynens/jquery-placeholder

DEMO

Demo & Examples

HTML5 Placeholder jQuery Plugin 사용법

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>

jQuery 라이브러리와 HTML5 Placeholder jQuery Plugin를 삽입한다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.placeholder.js"></script>

HTML5 Placeholder jQuery Plugin을 적용한다.

<script>
$(function() {
  $('input, textarea').placeholder();
});
</script>

Placeholder 속성에 CSS를 적용시킨다. 이 플러그인은 placeholder 속성을 가진 태그에 class="placeholder" 클래스를 자동으로 추가시켜주기 때문에 CSS를 적용시키실 수 있다. 단, IE등의 placeholder 속성을 공식적으로 지원하지 않는 브라우저에만 해당한다.

.placeholder { color: #aaa; }

HTML5 Placeholder jQuery Plugin 주의사항

• jQuery 1.6+ 을 지원한다. jQuery 1.4.2+ 에서 작동하는 구버전은 v1.8.7을 사용해야 한다.
• IE6을 포함한 모든 고급 브라우저에서 작동한다.
• 브라우저가 기본적으로 HTML5의 placeholder 속성을 input 요소와 textarea 요소에 지원하는지 자동적으로 체크하고 지원한다면 플러그인은 어떠한 동작도 하지 않는다. 만일 input 요소에서만 이를 지원한다면 플러그인은 textarea 요소에만 독립적으로 작동한다(Safari 4, Opera 11.00, and possibly other browsers).
• jQuery.fn.placeholder.input 및 jQuery.fn.placeholder.textarea의 두 개의 기능 테스트의 결과를 캐시한다. 예를 들면, 만일 input 요소에서 placeholder 속성을 기본적으로 제공한다면 jQuery.fn.placeholder.input은 true 이다. 플러그인을 로딩한 후에 자신의 코드에서 이러한 속성을 다시 사용할 수 있다.

• 브라우저가 password 컨트롤 요소를 위해 가짜 placeholder 속성을 위해 여분의 input 요소가 필요하더라도 ID를 중복되지 않게 작성해라. (Makes sure it never causes duplicate IDs in your DOM, even in browsers that need an extra input element to fake @placeholder for password inputs. This means you can safely do stuff like:)

  <label for="bar">Example label</label>
  <input type="password" placeholder="foo" id="bar">
  

  label 요소는 항상 input 요소를 가리킬 것이고 모든 CSS 스타일은 ID를 기반으로 스타일링 될것이다.

현재 네이티브 IE8에서 password 필드가 ****로 나타나는 것을 fake password를 이용해 자동으로 수정해준다. 그러나 이로 인해 validate 플러그인 관련하여 에러가 발생된다. validate 플러그인들은 fake password와 호환되지 못하고 있다.