Javascript 对多个表单字段使用onblur事件
我有一个简单的函数，它使用onblur事件将格式应用于表单字段-如果字段中输入了7个字符，字段的边框将变为绿色。少于7个字符将产生红色边框。我希望能够在用户通过选项卡时将该功能分别应用于每个表单字段。目前，如果我填写第一个表单字段，两个表单字段将同时格式化。我认为答案是使用一个for循环来迭代输入，我只是不知道如何更新代码来反映这一点；非常感谢您的帮助Javascript 对多个表单字段使用onblur事件,javascript,jquery,forms,onblur,Javascript,Jquery,Forms,Onblur,我有一个简单的函数，它使用onblur事件将格式应用于表单字段-如果字段中输入了7个字符，字段的边框将变为绿色。少于7个字符将产生红色边框。我希望能够在用户通过选项卡时将该功能分别应用于每个表单字段。目前，如果我填写第一个表单字段，两个表单字段将同时格式化。我认为答案是使用一个for循环来迭代输入，我只是不知道如何更新代码来反映这一点；非常感谢您的帮助 <html> <head> <script src="https://ajax.googleapis.com/aj
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function charCount() {
var char = document.getElementById("numb").value.toString().length
if (char == 7) {
$("input").addClass("green").removeClass("red");
} else {
$("input").addClass("red").removeClass("green");
}
}
</script>
<style>
.green {border-color:#009900;}
.red {border-color:#990000;}
</style>
</head>
<body>
<p>Please input ID numbers:</p>
<input id="numb" maxlength = 7 onblur="charCount()">
<input id="numb" maxlength = 7 onblur="charCount()">
</body>
</html>
函数charCount（）{
var char=document.getElementById（“numb”）.value.toString（）.length
如果（字符==7）{
$（“输入”）.addClass（“绿色”）.removeClass（“红色”）；
}否则{
$（“输入”）.addClass（“红色”）.removeClass（“绿色”）；
}
}
.green{边框颜色：#009900；}
.red{边框颜色：#990000；}
请输入身份证号码：
$（“.numb”）.blur（函数（）{
var char=$（this）.val（）.length；
如果（字符==7）{
$（此）.addClass（“绿色”）.removeClass（“红色”）；
}否则{
$（此）.addClass（“红色”）.removeClass（“绿色”）；
}
});
绿色{边框颜色：#009900；}
.red{边框颜色：#990000；}
请输入身份证号码：
1.-对于多个输入，不能拥有相同的id。改为使用类
2.-然后使用“this”获得所用输入的参考
这里有一个有效的解决方案。希望有帮助
$（“.numb”）.blur（函数（）{
var char=$（this）.val（）.length；
如果（字符==7）{
$（此）.addClass（“绿色”）.removeClass（“红色”）；
}否则{
$（此）.addClass（“红色”）.removeClass（“绿色”）；
}
});
绿色{边框颜色：#009900；}
.red{边框颜色：#990000；}
请输入身份证号码：
某些点匹配：
首先，元素在一个html文档中不应该具有相同的id。它们可以有相同的类，但不能有ID
document.getElementById（“numb”）.value.toString（）.length
您正在尝试使用此语句查找用户的输入。这将始终从一个特定项目中选取值。最好在事件处理程序中使用$（this）
（我假设您使用的是jquery，并且知道如何操作）$（“输入”）.addClass
使用此。。您的目标是文档中存在的所有输入元素。明确你的目标首先，元素在一个html文档中不应该具有相同的id。它们可以有相同的类，但不能有ID
document.getElementById（“numb”）.value.toString（）.length
您正在尝试使用此语句查找用户的输入。这将始终从一个特定项目中选取值。最好在事件处理程序中使用$（this）
（我假设您使用的是jquery，并且知道如何操作）$（“输入”）.addClass
使用此。。您的目标是文档中存在的所有输入元素。明确你的目标
您的代码中有几个问题：
1） 当您使用此选择器$（“输入”）
时，您将该类应用于所有输入，而不是特定的输入。您需要创建一个选择器，以模糊的特定输入为目标
$("input").addClass("green").removeClass("red");
2） 两个输入元素使用相同的id
<input id="numb" maxlength = 7 onblur="charCount()">
<input id="numb" maxlength = 7 onblur="charCount()">
3） 您正在混合使用香草javascript和jQuery的选择器，这可能会导致问题，为了清晰起见，最好使用其中一个选择器
版本：
这是一个对您已经提出的内容更改最少的版本，但是您附加事件的方式效率非常低
<script>
function charCount(num) {
var elem = $("#numb" + num);
var char = elem.value.toString().length;
if (char == 7) {
$(elem).addClass("green").removeClass("red");
} else {
$(elem).addClass("red").removeClass("green");
}
}
</script>
<style>
.green {border-color:#009900;}
.red {border-color:#990000;}
</style>
</head>
<body>
<p>Please input ID numbers:</p>
<input id="numb1" maxlength = 7 onblur="charCount(1)">
<input id="numb2" maxlength = 7 onblur="charCount(2)">
函数字符数（num）{
变量元素=$（“#numb”+num）；
var char=elem.value.toString（）.length；
如果（字符==7）{
$（elem）.addClass（“绿色”）.removeClass（“红色”）；
}否则{
$（elem）.addClass（“红色”）.removeClass（“绿色”）；
}
}
.green{边框颜色：#009900；}
.red{边框颜色：#990000；}
请输入身份证号码：
更好的版本：
<html>
</head>
<script>
function init() {
$('input').on('blur', function() {
var elem = $(this);
if(elem.val().length < 7) {
elem.addClass('red').removeClass('green');
}
else {
elem.removeClass('red').addClass('green');
}
});
}
$( document ).ready(init);
</script>
<style>
.green {border-color:#009900;}
.red {border-color:#990000;}
</style>
</head>
<body>
<p>Please input ID numbers:</p>
<input maxlength = 7>
<input maxlength = 7>
</body>
</html>
函数init（）{
$（'input'）。在（'blur'，function（）上{
var elem=$（本）；
如果（元素值（）长度<7）{
元素addClass（'red'）。removeClass（'green'）；
}
否则{
元素removeClass（'red'）。addClass（'green'）；
}
});
}
$（文件）.ready（初始化）；
.green{边框颜色：#009900；}
.red{边框颜色：#990000；}
请输入身份证号码：
更好的解决方案是使用IIFE
我建议您通过一些资源来学习事件处理：
https://learn.jquery.com/events/handling-events/
https://api.jquery.com/category/events/
http://gregfranko.com/blog/jquery-best-practices/
希望有帮助 您的代码中有几个问题：
1） 当您使用此选择器$（“输入”）
时，您将该类应用于所有输入，而不是特定的输入。您需要创建一个选择器，以模糊的特定输入为目标
$("input").addClass("green").removeClass("red");
2） 两个输入元素使用相同的id
<input id="numb" maxlength = 7 onblur="charCount()">
<input id="numb" maxlength = 7 onblur="charCount()">
3） 您正在混合使用香草javascript和jQuery的选择器，这可能会导致问题，为了清晰起见，最好使用其中一个选择器
版本：
这是一个对您已经提出的内容更改最少的版本，但是您附加事件的方式效率非常低
<script>
function charCount(num) {
var elem = $("#numb" + num);
var char = elem.value.toString().length;
if (char == 7) {
$(elem).addClass("green").removeClass("red");
} else {
$(elem).addClass("red").removeClass("green");
}
}
</script>
<style>
.green {border-color:#009900;}
.red {border-color:#990000;}
</style>
</head>
<body>
<p>Please input ID numbers:</p>
<input id="numb1" maxlength = 7 onblur="charCount(1)">
<input id="numb2" maxlength = 7 onblur="charCount(2)">
函数字符数（num）{
变量元素=$（“#numb”+num）；
var char=elem.value.toString（）.length；
如果（字符==7）