【发布时间】：2014-03-04 01:51:08
【问题描述】：
我正在寻找一种方法来让我的 JavaScript 文件在用户不关注我网站上的文本框时关闭。
背景信息：
这是用于检查用户“密码”和“确认密码”字段是否匹配的注册表单。当用户尝试提交注册数据但密码不匹配时，我编写的脚本会将文本框的两个边框都变成红色。
我想要发生的事情：
当用户尝试提交表单后密码不匹配时，我不想让文本框的边框变为红色，我希望在用户不关注“确认密码”文本时触发此脚本框，密码不匹配。
我的代码：
HTML：
<div id="FormInput3">
<h3>Create Password</h3>
<input id="pass1" class="signup-textboxes" placeholder="Enter your desired password..." type="password" onfocus="emptyElement('status')" maxlength="100">
</div>
<div id="FormInput4">
<h3>Confirm Password</h3>
<input id="pass2" class="signup-textboxes" placeholder="Confirm your password..." type="password" onfocus="emptyElement('status')" maxlength="100">
</div>
<button id="signupbtn" onclick="signup()">Create Account</button>
CSS：
/* ****Password 1**** */
#signupform > #FormInput3 {
width: 450px;
height: 40px;
line-height: 40px;
margin-left: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
#signupform > #FormInput3 h3 {
vertical-align: middle;
font-family: "Lato Light", Arial;
color: gray;
font-size: 20px;
font-family: "Lato Regular", Arial;
font-weight: 100;
margin-left: 24px;
}
#signupform > #FormInput3 > #pass1{
float: right;
color: gray;
margin-top: -60px;
width: 250px;
background-color: #000;
border: none;
height: 30px;
margin-right: 5px;
border-bottom: 1px dotted gray;
font-size: 15px;
outline: none;
-webkit-transition: border-color 0.3s ease;
-moz-transition: border-color 0.3s ease;
-ms-transition: border-color 0.3s ease;
transition: border-color 0.3s ease;
}
#signupform > #FormInput3 > #pass1:hover {
border-color: #fff;
color: white;
}
#signupform > #FormInput3 > #pass1:focus{
border-color: #fff;
color: white;
}
/* ****Password 2**** */
#signupform > #FormInput4 {
width: 450px;
height: 40px;
line-height: 40px;
margin-left: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
#signupform > #FormInput4 h3 {
vertical-align: middle;
font-family: "Lato Light", Arial;
color: gray;
font-size: 20px;
font-family: "Lato Regular", Arial;
font-weight: 100;
margin-left: 10px;
}
#signupform > #FormInput4 > #pass2 {
float: right;
color: gray;
margin-top: -60px;
width: 250px;
background-color: #000;
border: none;
height: 30px;
margin-right: 5px;
border-bottom: 1px dotted gray;
font-size: 15px;
outline: none;
-webkit-transition: border-color 0.3s ease;
-moz-transition: border-color 0.3s ease;
-ms-transition: border-color 0.3s ease;
transition: border-color 0.3s ease;
}
#signupform > #FormInput4 > #pass2:hover {
border-color: #fff;
color: white;
}
#signupform > #FormInput4 > #pass2:focus{
border-color: #fff;
color: white;
}
JavaScript：
function signup(){
var p1 = _("pass1").value;
var p2 = _("pass2").value;
if(p1 != p2){
status.innerHTML = "Your password fields do not match.";
document.getElementById("pass1").style.borderColor="red";
document.getElementById("pass1").style.color="red";
document.getElementById("pass2").style.borderColor="red";
document.getElementById("pass2").style.color="red";
}
}
就像我之前提到的，您在此处看到的 JavaScript 文件执行我想要的操作，但仅在用户单击“注册”按钮之后。请让我知道是否可以按照我的要求进行操作。提前致谢！ （参考请到http://www.codesrce.com/signup.php）
【问题讨论】：
-
使用
blur事件。
标签： javascript php html css ajax