如何在用户输入时更改输入的类别？

我试图在用户输入密码时确认输入的颜色。如果匹配，则边框变绿，否则变为红色。如何在用户输入时更改输入的类别？

这里是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。

任何帮助将不胜感激！

来源

2017-08-07 Alex Underhill

每次在第一个例子中按下某个键时，是否不应该得到“confirmPass”值，以获取实际值？ –

尝试与onInput事件 –

建议：1）你在“addClass”中拼写错误“不正确”。 2）如果你想在这方面的帮助，我会建议创建一个JSFiddle或类似的。 –

这里是固定的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的值，否则您在开头声明的两个变量将始终包含两个输入的初始值。
每次用户按下某个键时，都需要删除输入的类，否则这两个类将应用于输入。

来源

2017-08-07 13:57:17

差不多。在添加“passCorrect”之前，您需要删除类“passIncorrect”。实际上，为每个循环移除类“passIncorrect”并在条件满足时再次添加它是一个好主意。 – Gerard

谢谢你指出这一点！只是修复它:) –

谢谢亚瑟！这不是在我的网站上工作，但它正在做我想要的小提琴。我认为这可能是其他问题，因为没有简单的测试可以使用JavaScript或JQuery。我将不得不深入一点，但一旦修复完毕，我一定会使用这个片段。 –

如何在用户输入时更改输入的类别？

回答

相关问题