[javascript] 로그인 박스에 아이디/패스워드배경

로그인박스에 아이디/패스워드가 써있고 클릭하면 사라지는 tip

<script language="javascript">

function USER_onpropertychange() {
  if(document.frmMember.password.value.length>0){
   document.frmMember.password.style.backgroundImage="";
   return true;
  }
 }

</script>

 

 

 

<table width="195" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <form name="form1" method="post" action="/login/login_ps.php">
      <td width="129" align="left" valign="top"><input type="text" name="userid" style="width:125px; height:19px; border:1px solid #cddfeb" onKeyDown="if (event.keyCode == 13) form1.pwd.focus();"

<!----------------------------------------요부분------------------------------------------------------------------->

style='height:18px; background-image:url(/images/loginbox_id.gif);background-repeat:no-repeat;background-position:left;' onfocus="this.style.backgroundImage=''" onpropertychange="return USER_onpropertychange()"

<!----------------------------------------요부분------------------------------------------------------------------->

></td>
      <td width="57" align="left" valign="top" rowspan="2"><img src="images/btn_login.jpg" width="49" height="40" onClick="sub(form1)" style="cursor:hand;"></td>
    </form>
  </tr>
  <tr>
    <td><input type="password" name="pwd" style="width:125px; height:19px; border:1px solid #cddfeb" onKeyDown="if (event.keyCode == 13) sub(form1);"

<!----------------------------------------요부분------------------------------------------------------------------->

style="height:18px; background-image:url(/images/loginbox_pw.gif);background-repeat:no-repeat;background-position:left;" onfocus="this.style.backgroundImage=''"

<!----------------------------------------요부분------------------------------------------------------------------->

></td>
  </tr>
</table>

 

 

 

onpropertychange 함수는  input 값이 변동되었을때 이벤트 처리

 

여기서는 input box의 값이 바뀌면 onpropertychange() 

 

function 을 호출해서 그값이 길이가 0보다 크면 스타일을 없애는 방식입니다