如何在用户输入时更改输入的类别?
我试图在用户输入密码时确认输入的颜色。如果匹配,则边框变绿,否则变为红色。如何在用户输入时更改输入的类别?
这里是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
。
任何帮助将不胜感激!
这里是固定的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的值,否则您在开头声明的两个变量将始终包含两个输入的初始值。
- 每次用户按下某个键时,都需要删除输入的类,否则这两个类将应用于输入。
差不多。在添加“passCorrect”之前,您需要删除类“passIncorrect”。实际上,为每个循环移除类“passIncorrect”并在条件满足时再次添加它是一个好主意。 – Gerard
谢谢你指出这一点!只是修复它:) –
谢谢亚瑟! 这不是在我的网站上工作,但它正在做我想要的小提琴。我认为这可能是其他问题,因为没有简单的测试可以使用JavaScript或JQuery。我将不得不深入一点,但一旦修复完毕,我一定会使用这个片段。 –
每次在第一个例子中按下某个键时,是否不应该得到“confirmPass”值,以获取实际值? –
尝试与onInput事件 –
建议:1)你在“addClass”中拼写错误“不正确”。 2)如果你想在这方面的帮助,我会建议创建一个JSFiddle或类似的。 –