수라의 티스토리

1.로그인창에서 아이디/비번 인풋영역에 설명이 bg로 깔린상태
2.포커싱되면 bg삭제, blur되면 bg 온.
  단, 입력값이 있을때는 blur되도 bg삭제 유지.

[SCRIPT]
<script type="text/javascript">
$(document).ready(function() {
    $(".top-menu .itp-id").focus(function() {
        $(".itp-id").removeClass("empty");
    });
    $(".top-menu .itp-id").blur(function() {
        $(".itp-id").addClass("empty");
    });
    $(".top-menu .itp-pw").focus(function() {
        $(".itp-pw").removeClass("empty");
    });
    $(".top-menu .itp-pw").blur(function() {
        $(".itp-pw").addClass("empty");
    });
    $(".itp-id").each(function() {
        $(this).blur(function() {
            var data=$(this).val();
            var len=data.length;
            if(len<1) {
                $(".itp-id").addClass("empty");
            }
            else {
                $(".itp-id").removeClass("empty");
            }
        });
    });
    $(".itp-pw").each(function() {
        $(this).blur(function() {
            var data=$(this).val();
            var len=data.length;
            if(len<1) {
                $(".itp-pw").addClass("empty");
            }
            else {
                $(".itp-pw").removeClass("empty");
            }
        });
    });
});
</script>

[HTML]
<form method="post" action="">
                <fieldset>
                    <legend>로그인 폼</legend>
                    <ul class="top-menu">
                        <li><input type="text" class="itp-id empty" id="emailId" /> <input type="password" class="itp-pw empty" id="pass" /> <a href="#"><img src="/images/common/btns_login.gif" alt="로그인" /></a></li>
                    </ul>
                </fieldset>
            <form>

[CSS]
#emailId.empty, #pass.empty {background:url('/images/common/bg_dec01.gif') no-repeat; }
#emailId.empty {background-position:0px 0px; }
#pass.empty {background-position:0px -19px; }



간략화

<input type="text" id="searchbox_for" onblur="if(this.value==''){this.value='프로젝트명을 입력해 주세요.'};" onfocus="if(this.value=='프로젝트명을 입력해 주세요.'){this.value=''};" value="프로젝트명을 입력해 주세요.">