사용자가 사용자 이름 또는 비밀번호 입력 필드를 클릭하고 입력하지 않고 종료 할 때마다 경고를 받으려고합니다. 그러나 "onfocus"대신 "onblur"를 사용한 후에이 작업을 수행 할 수 있습니다 (아래 Gurvinder의 답변에 감사드립니다). 이제 "onfocus"를 사용하여 양식 외부를 클릭하면 경고가 두 필드 모두에서 작동하는 것 같습니다. 그러나 사용자 이름 필드에서 암호 필드로 암호 필드를 가져 오기 위해 탭 키를 사용하면 "passwordCheck"기능이 계속 실행됩니다. 도와주세요.
<!DOCTYPE html>
<html>
<head>
<title>Javascript exercises</title>
<meta charset="UTF-8">
</head>
<body>
<form name="myForm" >
<table>
<tr>
<td>Username:</td>
<td><input name="username" id="userName" type="text" onfocus="userNameCheck();"></input></td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" id ="password" type="password" onfocus="passwordCheck();"></input></td>
</tr>
<tr>
<td></td>
<td><input type="Button" value="Submit"></input></td>
</tr>
</table>
</form>
<script>
//User name field validator - Alert a message for empty input fields
var userNameCheck = function() {
if(document.myForm.username.value == ""){
alert("User Name cannot be blank");
}
else{
return false;
}
}
//password field validator - Alert a message for empty input fields
var passwordCheck = function() {
if(document.myForm.password.value == ""){
alert("Password cannot be blank");
}
else{
return false;
}
}
</script>
</body>
</html>
사용자가 데이터를 입력하지 않고 클릭하고 다음 필드로 이동하면 사용자 이름 입력에 경고가 표시되기를 원합니다.
포커스 이벤트를 사용하여 입력 유효성을 확인하는 경우 값이 미리 채워지지 않으면 경고가 계속 발생합니다.
대신 흐림 이벤트를 사용하십시오 .onbluronfocus
<td><input name="username" id="userName" type="text" onblur="userNameCheck();"></input></td>
데모
<body>
<form name="myForm">
<table>
<tr>
<td>Username:</td>
<td><input name="username" id="userName" type="text" onblur="userNameCheck();"></input>
</td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" id="password" type="password"></input>
</td>
</tr>
<tr>
<td></td>
<td><input type="Button" value="Submit"></input>
</td>
</tr>
</table>
</form>
<script>
//User name field validator - Alert a message for empty input fields
var userNameCheck = function() {
if (document.myForm.username.length >= 1) {
//Nothing happens
} else {
alert("User Name cannot be blank");
return false;
}
}
</script>
</body>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다