JQuery .blur() Not Working
Question
Basically, my Blur() function in Jquery is not being activated. My code is below and I'm using a special .notify jquery addition. I don't think there is anything wrong the actual body of the function but its more to do with the .blur() function itself.
$(document).ready(function(e) { $("#verifypassword").blur(function(e) { var password1=document.getElementById("password").value; var password2=document.getElementById("verifypassword").value; if(password1!=password2){ $("#verifypassword").notify("Passwords do not match."); } else{ $("#verifypassword").notify("Passwords match!"); } }); });
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The KGV Connection</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <script src="jquery-2.1.1.min.js"></script> <script src="animation.js"></script> <script src="notify.js"></script> </head> <body> <script type="text/javascript"> function makeitpassword(){ var passform= document.getElementById("passcontainer"); passform.innerHTML="<input type=\\"password\\" class=\\"signuser\\"id=\\"password\\" value=\\"\\"/>"; document.getElementById("password").focus(); } function makeitpassword2(){ var passform= document.getElementById("passcontainer2"); passform.innerHTML="<input type=\\"password\\" class=\\"signuser\\" id=\\"verifypassword\\" value=\\"\\" onfocus=\\"makeitpassword2()\\"/>"; document.getElementById("verifypassword").focus(); } </script> <div class="signup"> <h1 class="signheader">Sign Up</h1> <br /> <form id="signup" action="signup.php" method="post"> <input type="text" class="signuser" name="username" value="Username"/> <div id="passcontainer"> <input type="text" class="signuser" value="Password" id="password" onfocus="makeitpassword()" name="Password"/> </div> <div id="passcontainer2"> <input type="text" class="signuser" id="verifypassword" onfocus="makeitpassword2()" value="Repeat Password" name="VerifyPassword"/> </div> <input type="email" class="signuser" value="Email" name="Email"/> <br /> <br /> <input type="submit" value="Sign Up" class="logsubmit"/> </form> </div> </body>
1 answers
solution1
1 ACCPTED 2015-02-21 12:28:21
Your onblur isn't working because it isn't set to the password element. When a user clicks on your password inputs they get replaced by a new one with your makeitpassword#() functions. This causes the original element to be removed and the new element doesn't has a blur attached to it. Lose the onfocus events and you'll be fine!
If you want to display a message in the input use placeholder :
<input type="password" placeholder="password here">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.