placeholder 속성
placeholder 속성은 힌트(한 단어나 짧은 구)를 나타냅니다.
이러한 힌트는 사용자가 데이터를 입력하는데 도움을 주는 목적입니다. 이것은 값의 예가 될수도 있고, 기대하는 형태의 짤막한 설명이 될 수도 있습니다.
속성값 : 속성 값은 줄바꿈 문자를 제외한 텍스트입니다.
<textarea placeholder="비밀번호" title="영문자, 숫자, 특수 기호를 조합한 6자리 이상의 비밀번호를 입력해 주세요."></textarea>메모
긴 힌트나 조언 텍스트에는 title 속성 이 좀 더 적절합니다.
placeholder속성을 label 요소 를 대체할 목적으로 사용해서는 안됩니다.
input요소와textarea요소의placeholder속성과의 차이는 힌트 텍스트 '길이' 정도입니다.보통 input 요소의 길이가 textarea 요소보다 짧기 때문입니다. 하지만 명세에서 '길이'에 대한 명확한 안내는 없고, 일반적인 UI 형태를 고려한 것으로 큰 의미는 없다고 보여집니다.
위와 같이 placeholder 는 input 요소와 textarea 요소에서 많이 사용되고 있습니다.
하지만 아쉽게도 IE9 이하에서는 해당 속성이 적용되지 않아 크로스 브라우징에 에로사항이 있습니다.
크로스 브라우징을 위해 IE9 이하에서도 위 속성이 적용될 수 있는 polyfill(대체방안) 을 소개하고자 합니다.
Placeholders.js 소개
위의 홈페이지에서 HTML5 placeholder 속성을 위한 javaScript polyfill 을 제공해 주고 있습니다.
JS 는 모든 브라우저에서 사용이 가능하며 가볍습니다.
홈페이지 : http://jamesallardice.github.io/Placeholders.js/
GitHub : https://github.com/jamesallardice/Placeholders.js/
1. input 요소와 textarea 요소에 적용됩니다.
2. 브라우저의 기본 스타일(native)로 랜더링되며, 스타일을 수정 가능하도록 placeholdersjs 라는 클래스를 사용할 수 있습니다.
3. 기본적으로 placehoder 속성을 지원하는 브라우저에는 영향을 미치지 않습니다.
4. IE6+ 이상에서 작동하고 다른 기타 추가적인 것들이 필요하지 않습니다.
5. IE8 에서는 input 요소의 password 타입의 플레이스홀더가 *** 와 같은 형태로 표현되어 집니다.
Placehoders.js 사용 방법
HTML 에서 사용할 폼 컨트롤을 생성하고, placeholders.js 를 다운로드 받아 body 의 끝 부분에 적절히 로드합니다.
<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>
<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 로 설정해야 합니다.
[출처] : WEBDIR
'Code Lab' 카테고리의 다른 글
| jQuery CSS 메소드 사용자 오버라이딩 (0) | 2015.12.29 |
|---|---|
| matchHeight (jQuery) (0) | 2015.11.27 |
| jQuery ellipsis - 반응형 말줄임 (0) | 2015.11.25 |
| tab menu UI (0) | 2015.11.20 |
| 동영상(유튜브) 탭 구현 (0) | 2015.11.10 |
