使用 onclick 事件时不会显示消息框

Question

我试图在单击输入类型密码字段时显示密码验证的消息框。我希望消息框在我点击密码字段时立即显示。

到目前为止，如果我运行页面并单击密码输入字段，我必须点击进入，点击退出，然后再次点击进入，只是为了出现消息框。我无法准确指出这里的错误，因为我对Javascript和HTML相当陌生。

我使用visual studio代码的IDE，它似乎没有显示任何错误，当我运行，所以它必须是一个内部问题。

我的代码是:

function getPassword() {    
var myInput = document.getElementById("psw");
var number = document.getElementById("number");
var length = document.getElementById("length");
// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}   
// Validate numbers
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
// Validate length
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}

输入类型代码如下:

<label for="psw"><b>Password:</b></label> <br>
<input id = "psw" name="psw" type="password" onblur=" getPassword();"/> <br>

<input type="button" value="check password" class="checkpsw">

我的CSS代码是:

input {
width: 50%;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;

}
input[type=radio]{
position:absolute;
line-height: 2px;

}
input[type=checkbox]{
position:absolute;
line-height: 2px;
}
/* Style the button */
input[type=button] {
background-color: #04AA6D;
color: white;
}
.checkpsw {
background-color: #0fabb6;
color: white;
}
/* Style the container for inputs */
.container {
background-color: #f1f1f1;
padding: 20px;
}

/* The message box is shown when the user clicks on the password field */
#message {
display:none;
background: #f8f8f8;
color: #000;
position: relative;
padding: 15px;
margin-top: 10px;
width:50%;
}

#message p {
padding: 10px 35px;
font-size: 18px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
color: green;
}

.valid:before {
position: relative;
left: -35px;
content: "2714";
}

/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
color: red;
}

.invalid:before {
position: relative;
left: -35px;
content: "2716";
}

Answer 1

使用myInput。onfocus = function()在getPassword函数块之外。

Answer 2

您需要以这种方式修改代码。它会解决你的问题。基本上，当你进入密码域，它会是focus，所以你想做的任何事情。如果你想改变焦点的边框颜色你也可以这样做

// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
function getPassword() {    
var myInput = document.getElementById("psw");
var number = document.getElementById("number");
var length = document.getElementById("length");       
// Validate numbers
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
// Validate length
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}