Application d'événement dans la zone de texte : Prenons l'e-mail de saisie comme exemple, comme indiqué dans la figure : Le code est le suivant : Copiez le code Le code est le suivant : <br>/*Style d'initialisation de l'élément*/ <br>.divInit{ width:390px; height:55px; padding-left:20px;} <br>.txtInit{ border:solid 1px #666; padding:3px; background-image:url( 'Images/bg_email_input.gif');} <br>.spnInit{ width:179px; line-height:40px; padding-left:10px; background-repeat: no-repeat;} <br>/*L'élément perd le style de focus*/ <br>.divBlur{ background-color:#FEEEC2;} <br>.txtBlur{ border:solid 1px #666 ; remplissage :3px ; image d'arrière-plan :url('Images/bg_email_input2.gif');} <br>.spnBlur{ image d'arrière-plan:url('Images/bg_email_wrong.gif');} <br>.divFocu { background-color:#EDFFD5;} / *div obtient le style de focus*/ <br>.spnSucc{ background-image:url('Images/pic_Email_ok.gif'); la vérification est réussie*/ <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"); //La zone de texte obtient le focus par défaut<br>$("#txtEmail").focus(function () { / /La zone de texte obtient l'événement focus<br>$(this ).removeClass("txtBlur").addClass("txtInit"); <br>$("#email").removeClass("divBlur").addClass(" divFocu"); <br>$("#spnTip" ).removeClass("spnBlur").removeClass("spnSucc").html("Veuillez saisir votre adresse email habituelle ! "); <br>}); <br>$("#txtEmail").blur(function () { //La zone de texte perd le focus de l'événement<br>var vTxt = $("#txtEmail").val() ; <br>if (vTxt.length == 0) { //Si l'adresse e-mail est saisie dans la zone de texte<br>$(this).removeClass("txtInit").addClass("txtBlur"); >$( "# email").removeClass("divFocu").addClass("divBlur"); <br>$("#spnTip").addClass("spnBlur").html("L'adresse e-mail ne peut pas être vide ! "); <br>} <br>else { //Vérifiez si le format de l'e-mail est correct<br>if (!chkEmail(vTxt)) { //S'il est incorrect<br>$(this).removeClass(" txtInit").addClass( "txtBlur"); <br>$("#email").removeClass("divFocu").addClass("divBlur"); <br>$("#spnTip").addClass(" spnBlur").html( "Le format de l'e-mail est incorrect !"); <br>} <br>else { //Si correct<br>$(this).removeClass("txtBlur").addClass("txtInit") ; <br>$(" #email").removeClass("divFocu"); <br>$("#spnTip").removeClass("spnBlur").addClass("spnSucc").html(""); <br>} <br> } <br>}); <br>/*Vérifiez si le format de l'e-mail est correct. Paramètre strEmail, l'adresse e-mail qui doit être vérifiée*/ <br>fonction chkEmail(strEmail) { <br>var vChk = /^w ([- .]w )*@w ([-.]w )*.w ([-.]w )*$/ <br>if (!vChk.test(strEmail )) { <br>return false <br>} <br>else { <br>return true <br>} <br>} ; ;/head> <br><body> <br> <form id="form1" action="#"> <br><div id="email" class="divInit"> 🎜><span id="spnTip" class="spnInit "></span> <br><input type="text" id="txtEmail" class="txtInit" /> ;/div> <br></form> <br></corps></div>