0
사용자가 내 사이트의 텍스트 상자에 초점을 맞출 때 JavaScript 파일을 내보내는 방법을 찾고 있습니다.텍스트 상자에 초점이 맞지 않으면 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;
}
자바 스크립트 :
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";
}
}
당신은 여기 않습니다보고 내가 전에 언급처럼, 자바 스크립트 파일 내가 뭘 원하는지 사용자가 "가입"버튼을 클릭 한 후에 만 가능합니다. 내가 원하는 것을 할 수 있는지 알려주십시오. 미리 감사드립니다!
'blur'이벤트를 사용하십시오. – Barmar