인풋박스 안에 사라지는 제목

간단한 스크립트다. 사용자 입력상자 안에 제목이 들어 있고, 사용자가 입력상자를 선택(Focus) 했을 때는 제목이 사라지고, 입력상자를 벗어난 경우 본래대로 나타나 보이게 하는 스크립트다. 단 새로운 내용이 입력된 경우에는 제목이 나타나지 않고, 입력된 내용이 유지되어야 한다. 훌륭하게 작성된 스크립트가 많지만 가끔은 그런 스크립트가 초보자들 입장에서 가져와서 해석하는 것이 여간 어려운 일이 아닐 수 없다.

적어도 이 예제는 쉽지 않을까 싶다.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>new document</title>
  <meta name="Author" content="Bomnun" />
  <meta name="Reply-to" content="chubzo@gmail.com" />
  <script type="text/javascript">
  <!--
      window.onload = function()
      {
          clickToHide(); // HTML 문서 로딩이 완료되면 실행
      }

      function clickToHide()
      {
          inputs = document.getElementsByTagName("input"); // 문서내 모든 input 요소(Tag)를 inputs 배열 변수에 담고
          for(var i = 0; i<inputs.length; i++) // 배열에 저장된 갯수만큼 반복시킨다
          {
              if(inputs[i].type == "text") // input 요소의 타입이 'text' 인것만 골라서
              {
                  inputs[i].value = inputs[i].getAttribute("title"); // 입력상자의 title 속성값을 value 속성값으로 지정하면 HTML 문서가 로딩된 후에 입력상자에는 제목이 들어가게 된다
                  inputs[i].onfocus = function() // 입력상자가 선택(Focus 이벤트)될 때
                  {
                      if(this.value == this.getAttribute("title")) // 입력상자 값이랑 title 속성값이 같으면
                      {
                          this.value = ""; // 비우고
                      }
                  }
                  inputs[i].onblur = function() // 입렵상자를 떠날때(Blur 이벤트)
                  {
                      if(this.value == "") // 값이 비어 있으면
                      {
                          this.value = this.getAttribute("title"); // title 속성값(제목)을 다시 넣는다
                      }
                  }
              }
          }
      }
  //-->
  </script>
  <style type="text/css">
      fieldset { padding: 30px; }
  </style>
</head>
<body>
<fieldset>
  <legend>모교 이름 쓰기</legend>
  <p><input name="user_txt_1" type="text" title="초등학교 이름" /></p>
  <p><input name="user_txt_2" type="text" title="중학교 이름" /></p>
  <p><input name="user_txt_3" type="text" title="고등학교 이름" /></p>
</fieldset>
</body>
</html>

최근에 로그인 영역 등에 '로그인', '비밀번호'와 같은 제목을 입력상자 안에 넣는 디자인이 자주 등장하는데 위와 같은 방법으로 처리할 수 있을것 같다. 물론 디자인으로 처리된 경우는 위 방법은 어렵고 배경 이미지를 스타일시트로 호출하는 방식이 좋은것 같다.

이 글은 스프링노트에서 작성되었습니다.