Question

我正在制作一个注册表单，当密码和确认密码匹配时，注册按钮会在悬停时变为绿色，但是当您将鼠标悬停在该按钮上时会变成绿色，然后从密码字段中删除一个数字（因此密码并确认不匹配），然后移开鼠标，按钮将保持绿色，而不是变回原始颜色。

密码匹配时按钮为绿色

密码不匹配时按钮保持绿色

Codepen：https://codepen.io/makeyka/pen/oVQPOV

HTML：

<form>
<p class="font"><span id="movePassword">Password</span></p>

<input id="password" type="password" name="password" placeholder="Password.." onfocus="this.placeholder=''" onblur="this.placeholder='Password..'" required>

<p class="font"><span id="movePassword">Confirm Password</span></p>

<input id="confirm_password" type="password" name="password" placeholder="Confirm.." onfocus="this.placeholder=''" onblur="this.placeholder='Confirm..'" onkeyup="check();" required><span id="msg"></span>

<br><br>

<input type="submit" name="submit" value="SIGN UP" id="submit">
</form>

CSS：

#msg {
    left: 3%;
    font-size: 1.5em;
    font-weight: bold;
    position: relative;
}

#submit {
    position: relative;
    left: 3%;
    width: 120px;
    color: #4e5463; 
    background-color: #e8ecf7;
    cursor: pointer;
}

JS：

    var check = function() {

   if (document.getElementById("password").value == document.getElementById("confirm_password").value) {
       document.getElementById("msg").style.color = "#009FFD"; // Green
       document.getElementById("msg").innerHTML = "&#10004"; // Sign
       document.getElementById("submit").disabled = false; // Able to login (passwords match)

       $("#submit").mouseenter(function() {
            $(this).css("background", "#009FFD").css("borderRadius", "10px").css("color", "#423d3d"); // Green button background

       }).mouseleave(function() {
        $(this).css("background", "#e8ecf7").css("borderRadius", "0px").css("color", "#4e5463"); // Button default background color
       });

   } else {
       document.getElementById("msg").style.color = "red"; 
       document.getElementById("msg").innerHTML = "&#9888"; // Sign
       document.getElementById("submit").disabled = true; // Unable to login (passwords do not match)
   }

}

Answer 1

发生这种情况是因为mouseenter and mouseleave events don't work on disabled elements。如果密码不匹配，则会禁用“提交”按钮，这意味着mouseleave不会被触发，样式也永远不会恢复正常。

您可以通过使用CSS enabled和hover属性而不是jquery的mouseenter和mouseleave来解决此问题。

在您的CSS中，添加以下规则：

#submit:enabled:hover {
  background-color: #009FFD;
  border-radius: 10px;
  color: 423d3d;
}

然后在您的JavaScript中，删除事件监听器：

var check = function() {

   if (document.getElementById("password").value == document.getElementById("confirm_password").value) {
       document.getElementById("msg").style.color = "#009FFD"; // Green
       document.getElementById("msg").innerHTML = "&#10004"; // Sign
       document.getElementById("submit").disabled = false; // Able to login (passwords match)
   } else {
       document.getElementById("msg").style.color = "red"; 
       document.getElementById("msg").innerHTML = "&#9888"; // Sign
       document.getElementById("submit").disabled = true; // Unable to login (passwords do not match)
   }

}

Codepen

Answer 2

Benjamin对mouseenter和mouseleave事件的描述是正确的，他对:hover伪类的使用确实是处理它的方法，但是我也想将样式保留在javascript中；我宁愿设置描述事物状态的类，然后使用CSS，而不是操纵元素上的.style。

您几乎可以使用所有CSS和最少量的javascript来做到这一点。
下面，我要做的就是切换valid元素上的类invalid和<form>，然后启用/禁用“提交”按钮。根据表单是.valid还是.invalid

，应用样式进行其他所有操作

// Get the elements we're going to use just once.
let password = document.getElementById('password');
let confirm  = document.getElementById('confirm_password');
let submit = document.getElementById('submit');
let form = password.parentElement;

let check = function() {
    if (password.value === confirm.value) {
        form.classList.remove('invalid');
        form.classList.add('valid');
        submit.disabled = false;
    }
    else {
        form.classList.remove('valid');
        form.classList.add('invalid');
        submit.disabled = true;
    }
}

#msg {
    left: 3%;
    font-size: 1.5em;
    font-weight: bold;
    position: relative;
}

#submit {
    position: relative;
    left: 3%;
    width: 120px;
    color: #4e5463; 
    background-color: #e8ecf7;
    cursor: pointer;
}

form.valid #msg:before {
    content: '\2714';
    color: #009FFD;
}
form.invalid #msg:before {
    content: '\0026A0';
    color: red;
}
form.valid #submit:hover {
    background-color: #009FFD;
    color: #423d3d;
    border-radius: 10px;
}

<form class=""> <!-- form starts as neither valid or invalid -->
<p class="font">
    <span id="movePassword">Password</span>
</p>

<input id="password" type="password" name="password"
       placeholder="Password.." required>

<p class="font">
    <span id="movePassword">Confirm Password</span>
</p>

<input id="confirm_password" type="password" name="password"
        placeholder="Confirm.." onkeyup="check();" required>
<span id="msg"></span>

<br><br>

<input type="submit" name="submit"
       value="SIGN UP" id="submit">
</form>

<p class="font">提示确实应该使用<label for="password"> －这就是标签的含义－然后使用CSS设置它们的样式，而class="font"不是很具描述性；类应描述事物的状态或事物的，而不是外观，因此，如果您不使用{{1} }可能是<label>

Answer 3

解决此问题的一种方法是在keyup上再次运行check（）函数：

<input id="password" onkeyup="check()" type="password" name="password" placeholder="Password.." onfocus="this.placeholder=''" onblur="this.placeholder='Password..'" required>

如何防止CSS为元素上色

3 个答案: