2011.09.08 12:30
Placeholder라는 텍스트 박스에 미리 희미하게 입력되어 있어서 사용자들의 입력을 도와주는 기능을 말합니다. 아래 그림은 국내 모 포탈의 화면으로 아이디와 비밀번호의 입력을 자연스럽게 유도하고 있습니다.

 


이런 Placeholder를 구현하기 위해서는 기존에는 Java Script를 사용하는 방법만이 유일했지만 HTML5에서는 기본적으로 Placeholder를 제공합니다.

<label for="first_name">First Name</label> : <input id="first_name" placeholder="First name goes here">


그런데 아직 Placeholder는 IE에서는 지원되지 않고 있다. 그래서 당분간은 Java Script를 사용하는 방법이 유지되어야 할 것 같습니다.
Browsers Placeholder Support
IE 9
Firefox 3.7
Safari 4.0
Chrome 4.0
Opera 11

Java Script를 활용하는 소스는 아래 소스를 참조하면 됩니다.

<label for="demo">Placeholder demo</label> : <input id ="demo" placeholder="Support Placeholder" />

<script>
function testAttribute(element, attribute)
{
  var test = document.createElement(element);
  if (attribute in test)
    return true;
  else
    return false;
}

if (!testAttribute("input", "placeholder"))
{
  window.onload = function()
  {
    var demo = document.getElementById("demo");
    var text_content = "No Placeholder support";

    demo.style.color = "gray";
    demo.value = text_content;

    demo.onfocus = function() {
    if (this.style.color == "gray")
    { this.value = ""; this.style.color = "black" }
  }

  demo.onblur = function() {
  if (this.value == "")
    { this.style.color = "gray"; this.value = text_content; }
    }
  }
}
</script>


김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고


티스토리 툴바