텍스트 상자의 이벤트 적용 : 그림과 같이 입력 이메일을 예로 들어 보겠습니다. 코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. <br>/*요소 초기화 스타일*/ <br>.divInit{ width:390px; height:55px; line-height:55px; padding-left:20px;} <br>.txtInit{ border:solid 1px #666; 패딩:3px; 배경 이미지:url('Images/bg_email_input.gif');} <br>.spnInit{ width:179px; line-height:40px; float:right; padding-left:10px; background-repeat: no-repeat;} <br>/*요소가 포커스 스타일을 잃음*/ <br>.divBlur{ background-color:#FEEEC2;} <br>.txtBlur{ border:solid 1px #666; 패딩:3px; 배경 이미지 :url('Images/bg_email_input2.gif');} <br>.spnBlur{ background-image:url('Images/bg_email_wrong.gif');} <br>.divFocu { background-color:#EDFFD5;} / *div는 포커스 스타일을 가져옵니다*/ <br>.spnSucc{ background-image:url('Images/pic_Email_ok.gif') margin-top:20px;} /*스팬 스타일은 다음과 같습니다. 확인 성공*/ <br></ style> <br><script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> ><script src="Scripts/jquery- 1.4.1.js" type="text/javascript"></script> <br><script type="text/javascript"> (function () { <br>$(" #txtEmail").trigger("focus"); //기본적으로 텍스트 상자에 포커스가 부여됩니다<br>$("#txtEmail").focus(function () { / /텍스트 상자에 포커스 이벤트가 발생합니다<br>$(this ).removeClass("txtBlur").addClass("txtInit") <br>$("#email").removeClass("divBlur").addClass(" divFocu"); <br>$("#spnTip" ).removeClass("spnBlur").removeClass("spnSucc").html("보통 이메일 주소를 입력하세요! "); <br>}); <br>$("#txtEmail").blur(function () { //텍스트 상자가 포커스를 잃음 이벤트<br>var vTxt = $("#txtEmail").val() ; <br>if (vTxt.length == 0) { //텍스트 상자에 이메일 주소가 입력되었는지 여부<br>$(this).removeClass("txtInit").addClass("txtBlur") <br>$( "# email").removeClass("divFocu").addClass("divBlur"); <br>$("#spnTip").addClass("spnBlur").html("이메일 주소는 비워둘 수 없습니다! "); <br>} <br>else { //이메일 형식이 올바른지 확인<br>if (!chkEmail(vTxt)) { //잘못된 경우<br>$(this).removeClass(" txtInit").addClass( "txtBlur"); <br>$("#email").removeClass("divFocu").addClass("divBlur"); <br>$("#spnTip").addClass(" spnBlur").html( "이메일 형식이 잘못되었습니다!"); <br>} <br>else { //올바른 경우<br>$(this).removeClass("txtBlur").addClass("txtInit") ; <br>$(" #email").removeClass("divFocu") <br>$("#spnTip").removeClass("spnBlur").addClass("spnSucc").html(""); <br>} <br> } <br>}); <br>/*이메일 형식이 올바른지 확인합니다. 매개변수 strEmail, 확인이 필요한 이메일*/ <br>function chkEmail(strEmail) { <br>var vChk = /^w ([- .]w )*@w ([-.]w )*.w ([-.]w )*$/ <br>if (!vChk.test(strEmail) ) { <br>false 반환 <br>} <br>else { <br>return <br>} <br>}); /head> <br><body> <br> <form id="form1" action="#"><br><div id="email" class="divInit">이메일: <br><span id="spnTip" class="spnInit "></span> <br><input type="text" id="txtEmail" class="txtInit" /> /div> <br></form> <br></body> <br><br> </div>
