간단한 스크립트다. 사용자 입력상자 안에 제목이 들어 있고, 사용자가 입력상자를 선택(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>
<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>
최근에 로그인 영역 등에 '로그인', '비밀번호'와 같은 제목을 입력상자 안에 넣는 디자인이 자주 등장하는데 위와 같은 방법으로 처리할 수 있을것 같다. 물론 디자인으로 처리된 경우는 위 방법은 어렵고 배경 이미지를 스타일시트로 호출하는 방식이 좋은것 같다.
이 글은 스프링노트에서 작성되었습니다.
감사해요~ㅎ 퍼가요~
답글삭제@문스 - 2008/10/28 10:33
답글삭제^^ 네 감사합니다~
굉장히 좋은 내용이네요.
답글삭제전 약간 추가를 했습니다.
보통 input의 type가 text인 경우 사이트 전반적으로 동일한 디자인을 가지죠...(물론 사이즈는 제외...border이라든지...)
inputs[i].value = inputs[i].getAttribute("title");윗줄에...아래의 두줄을 추가해보았습니다.
물론 css로도 컨트롤이 가능하나...expression을 사용해야 해서 좀 그렇고...
inputs[i].style.border = "1px solid #ccc"
inputs[i].style.padding = "0 3px"
이렇게 공통적인 js로 사용하면 괜찮을거 같네요~~
(이 댓글은 제 블로그에도 올려놓겠습니다. 물론 작성하신 본문의 내용도 좀 인용하구요...그래도 될까요??)
와 제 블로그에 담아갑니다
답글삭제좋은 정보 감사해요 ^^
@쌀 - 2008/12/03 17:09
답글삭제찾아주셔서 감사합니다~