HTML : HTML5 Placeholder 특성 사용 방법 : 예제, 구현

HTML : HTML5 Placeholder 특성 사용 방법 : 예제, 구현

 

HTML5란 무엇인가?라는 기사에서 HTML5와 함께 제공되는 새로운 기능들을 몇 가지 언급했습니다. HTML5의 장점 중 하나는 HTML form의 기능입니다.  HTML5의 이점은 HTML form에 JavaScript를 추가할 필요가 없다는 것입니다. 일반적으로 HTML form에는 항상 수행해야 하는 많은 작업이 있습니다.

주요 내용은 항상 유효성 검사 양식에는 항상 클라이언트 쪽 유효성 검사가 있어야 하지만 다른 form에는 날짜 선택기와 placeholders가 있습니다. Placeholders는 HTML5에서 매우 유용한 기능입니다. 이 특성은 기본 텍스트가 비어 있을 때 양식 입력에 표시되지만 포커스가 제거되는 속성입니다.

이 기능은 이전 HTML에서 JavaScript를 사용하여 수동으로 수행해야 하지만 현재 일부 브라우저에서 지원되지 않습니다. 모든 새 브라우저가 placeholders를 지원하지만 IE9보다 낮은 브라우저에서는 HTML5 plcaeholder를 지원하지 않습니다.

이전 브라우저에서 placeholder를 사용하려면 placeholder가 작동하는 것처럼 포커스에서 텍스트를 제거하기 위해 JavaScript를 추가해야 합니다. 이 문서에서는 플레이스홀더를 사용하는 방법과 이전 브라우저에서 플레이스홀더를 사용하는 방법을 보여드리겠습니다.

 

 

HTML5 Placeholder Attribute

placeholder를 사용하려면 입력 태그에 속성을 추가하기만 하면 됩니다.

<input type=text placeholder=Click here to make text disappear />

 

 

Styling HTML5 Placeholder

HTML5 플레이스홀더는 페이지의 다른 요소와 동일한 방식으로 스타일을 지정할 수 있습니다. Firefox 및 Webkit 브라우저에는 입력 상자의 plcaeholder로 사용되는 텍스트의 스타일을 쉽게 지정할 수 있는 CSS 속성이 있습니다.

HTML5 플레이스홀더의 스타일을 변경하려면 다음 구문만 사용합니다.

input::-webkit-input-placeholder {
    color: #999;
    font-style: italic; 
}

input::-moz-placeholder {
    color: #999;
    font-style: italic; 
}

 

 

Styling Placeholder Shown

CSS property:placeholder-shown를 사용하여 placeholder가 표시될 때 요소의 스타일을 지정할 수 있습니다.

input[type=text]:placeholder-shown
{
    border: 5px solid red;
}

 

 

포커스에서 Placeholder 텍스트를 제거

Javascript를 사용하여 수동으로 placeholder 효과를 만들 때 텍스트 상자의 클릭 이벤트에서 텍스트를 제거합니다. Placeholder 텍스트는 이 작업을 수행하지 않습니다.

텍스트 상자를 클릭하면 입력을 시작할 때까지 텍스트가 제거되지 않습니다. CSS를 사용하면 CSS selector ::focus를 사용하여 포커스가 이 텍스트 상자에 있을 때 텍스트가 투명하도록 설정할 수 있습니다.

.placeholder-fix:focus::-webkit-input-placeholder  { color:transparent; }
.placeholder-fix:focus::-moz-placeholder   { color:transparent; }

 

 

Javascript Placeholder

HTML5 이전에는 placeholder 특성과 동일한 동작을 위장하기 위해 JavaScript를 사용해야 했습니다. 값 속성을 사용하여 기본 텍스트를 추가한 다음 포커스에서 기본값을 제거해야 합니다.

그러나 값이 비어 있으면 흐리게 표시되면 기본 텍스트를 반환해야 합니다.

<input type="text" value="Click here to make text disappear" onfocus="if (this.value == 'Click here to make text disappear') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Click here to make text disappear';}">

 

 

Modernizr를 사용하여 Placeholder를 표시

이전 브라우저에서 새로운 HTML5 기능을 처리하는 가장 좋은 방법은 Modernizr JavaScript 파일을 사용하는 것입니다. Modernizr는 차세대 HTML5 및 CSS3 전원 웹 사이트를 구축하는 데 도움이 되는 오픈 소스 JavaScript 라이브러리입니다.

 Modernizr 스크립트는 자리 표시자 특성이 브라우저에서 지원되는지 확인합니다. 지원되지 않는 경우 일부 JQuery 코드를 실행하여 자리 표시자 역할을 수행합니다. 다음 코드 조각을 사용하여 자리 표시자 특성으로 작동합니다.

<script src="jquery.js"></script>
<script src="modernizr.js"></script>
<script>
$(document).ready(function(){
      if (!Modernizr.input.placeholder) {
        $j('input[type="text"]', 'header').each(function () {

          if (!$j(this).val()) {
            this.value = $j(this).attr('placeholder');
          }

          $j(this).focus(function () {
            if (this.value == $j(this).attr('placeholder')) {
              this.value = '';
            }
          });

          $j(this).blur(function () {
            if (this.value == '') {
              this.value = $j(this).attr('placeholder');
            }
          });

        });
      }

}

</script>

 

위의 스크립트를 사용하면 교차 브라우저 HTML5 자리 표시자를 사용할 수 있습니다.