In-Field Labels jQuery Plugin - 폼힌트 크로스브라우징

타임머신을 타고 과거로 돌아가는 심정으로 placeholder 속성을 대체하는 또 다른 방법을 소개합니다. placeholder 속성이 지원되지 않았던 과거에는 label 요소를 이용해 힌트를 제공하기도 했습니다. 비록 그 사용목적이 스펙에 맞지 않을지라도...

In-Field Labels jQuery Plugin 소개

필드 안쪽에 label 요소를 지원하는 형태로 올바른 형식의 HTML 폼을 만드는 간단한 플러그인이다. label 요소에 포커스가 맞춰지면 글자가 흐릿해지고 글자 입력이 시작되면 사라진다. 필드를 지우고 포커스를 잃으면 다시 글자가 나타난다.

HOME

In-Field Labels jQuery Plugin

REPO

https://github.com/dcneiner/In-Field-Labels-jQuery-Plugin/

DOWN

InFieldLabels.zip

브라우저 지원

• IE6+ (IE6은 필드의 배경과 동일하게 label 요소의 background-color 속성값을 설정해야 합니다)
• WebKit Browsers (Safari, Chrome)
• Firefox 2+

In-Field Labels jQuery Plugin 사용법

우선 HTML 구조를 아래와 같은 방식으로 작성합니다.

<p>
  <label for="field_id">Label Text</label><br />
  <input type="text" name="field_id" value="" id="field_id" placeholder="">
</p>

input 혹은 textarea 요소 위에 알맞게 label을 위치시키도록 CSS 기본 뼈대를 작성한다. label 과 input 요소들을 감싸는 블록 요소 하나를 준비하는데 예제에서는 <p> 요소를 사용하고 있다.

form p { position: relative; }
form p br { display: none; }
label  { position: absolute; top: 0; left:0; cursor: text }

jQuery 라이브러리를 삽입한 후에, 아래와 같이 플러그인을 활성화한다.

$(document).ready(function(){
  $("label").inFieldLabels();
});

In-Field Labels jQuery Plugin 옵션

옵션은 모든 inFieldLabel 컨트롤에 미리 설정하거나 메소드와 함께 전달 될 수 있다.

미리 설정하려면 아래와 같은 방법으로 설정한다.

$.inFieldLabels.defaultOptions.optionName = "";

호출시에 전달하려면 아래와 같은 방법으로 설정한다.

$("label").inFieldLabels({ optionName:value });

• fadeOpacity : 값은 0.1 ~ 1.0 사이의 값을 가진다.

  필드가 포커스 되었을때, label의 opacity 값이 애니메이션된다. 기본값은 0.5

• fadeDuration : 밀리초(milliseconds) 단위

  애니메이션이 발생할때, 애니메이션이 기간설정을 한다. 기본값은 300

• pollDuration : 폴링을 해제하는 시간(밀리초) 또는 0

  0보다 큰 숫자로 설정하면, 콘텐츠가 이 필드에서 검출 될 때가지 코드는 지정된 간격으로 필드의 값을 확인한다. 콘텐츠가 감지 또는 입력되면, 폴링은 이 필드에서 멈춘다.

• *className : 클래스는 각각의 label에 향상되게 적용된다. false 혹은 ""로 설정되면 클래스는 설정되지 않는다. 기본값은 false
• enabledInputTypes : input 요소의 type 값은 배열을 허용한다.

  일반적으로 checkbox와 radio 형식의 label은 페이드 아웃되는 것이 바람직하지 않다. 이 input 요소의 type 속성은 제어할 수 있도록 허용된다. 기본값은 ["text", "search", "tel", "url", "email", "password", "textarea"]

알려진 문제점

중복된 label 및 자동 완성 필드에 문제가 있다. 이 경우 0보다 큰 숫자로 pollDuration을 전달하여 폴링(polling)을 켤 수 있다. 사용을 위해 전역적으로 폴링을 설정하려면 기본값을 변경함 : $.InFieldLabels.defaultOptions.pollDuration = 300