javascript - 如何在用户键入时更改输入的类？

Question

我正在尝试在用户键入时更改密码确认输入的颜色。如果匹配，边框变为绿色，如果不匹配，则变为红色。

这是 JQuery:

var createPass = $("#createPass").val();
var confirmPass = $("#confirmPass").val();

$("#confirmPass").keydown(function() {

   if(confirmPass == createPass && confirmPass != "") {
      confirmPass.addClass("inputCorrect")
   } else {
      confirmPass.addClass("inputIncorect");
   }
});

html:

<label for="passWord">Create Password</label>
<input type="password" id="createPass" name="passWord" class="inputBox"  placeholder="Minimum 8 characters" required><br>

<label>Confirm Password</label>
<input type="password" id="confirmPass" class="inputBox" required>

还有 CSS:

input.passCorrect {
   border: 1px solid #00cc00;
}

input.passIncorrect {
   border: 1px solid #ff0000;
}

我也首先尝试了以下 JQuery，但对于这项工作来说似乎有点长:

$("input[id=confirmPass").keyup(function() {

   if ($("input[id=confirmPass]").val() == $("input[id=createPass]").val()) {

       ($("input[id=confirmPass]").removeClass("passIncorrect"));
       ($("input[id=confirmPass]").addClass("passCorrect"));

   }

   if ($("input[id=confirmPass]").val() != $("input[id=createPass]").val() && ($("input[id=confirmPass]") != "")) {

       ($("input[id=confirmPass]").removeClass("passCorrect"));
       ($("input[id=confirmPass]").addClass("passIncorrect"));

   }

});

我试过使用.keyup(), .keydown(), .keypress(), .change( )，并重命名了几乎每个类、id 和变量，但我没有成功!它在一个单独的 .js 文件中，我已经尝试过使用和不使用 $(document).ready() 并且它不起作用。我还尝试使用 .css() 而不是 .addClass 和 .removeClass。

如有任何帮助，我们将不胜感激!

Answer 1

这是使其工作的固定 Javascript:

var createPass = $("#createPass");
var confirmPass = $("#confirmPass");

confirmPass.keydown(function() {
    // Remove both classes
   confirmPass.removeClass("passCorrect passIncorrect");

   // Add the appropriate class
   if (confirmPass.val() == createPass.val() && confirmPass.val() != "") {
      confirmPass.addClass("passCorrect");
   } else {
      confirmPass.addClass("passIncorrect");
   }
});

以下是之前无法正常工作的部分:

• 在执行代码 confirmPass.addClass("inputCorrect") 时，您将一个类添加到一个整数值。
• 在您的 javascript 中，您添加了“inputCorrect”和“inputIncorrect”类，但在您的 CSS 中，您将这些类称为“passCorrect”和“passIncorrect”。
• 你需要在每次用户按键时获取createPass和confirmPass的值，否则你一开始声明的两个变量将始终包含两个输入的初始值。
• 每次用户按下一个键时，您都需要删除输入的类，否则这两个类都将应用于输入。