对多个表单字段使用 onblur 事件

Question

我有一个简单的函数，它使用 onblur 事件将格式应用于表单域 - 如果已将 7 个字符输入到该域中，该域的边框将变为绿色。少于 7 个字符会出现红色边框。我希望能够在用户通过标签时将功能分别应用于每个表单字段。目前，如果我填写第一个表单域，两个表单域会同时被格式化。我认为答案是使用循环遍历输入的 for 循环，我只是不知道如何更新我的代码以反映这一点；任何帮助深表感谢。

<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>

Answer 1

1.- 您不能对多个输入具有相同的 id。请改用 class。

2.- 然后使用 "this" 来引用正在使用的输入这是一个可行的解决方案。希望对您有所帮助！

 $(".numb").blur(function(){
        var char = $(this).val().length;
        if (char == 7) {
            $(this).addClass("green").removeClass("red");
        } else {
            $(this).addClass("red").removeClass("green");
        }
    });

.green {border-color:#009900;}
.red {border-color:#990000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p>Please input ID numbers:</p>
<input class="numb" maxlength = 7>
<input class="numb" maxlength = 7>

Answer 2

一些点队友：

首先，元素在一个 html 文档中不应该有相同的 ID。他们可以有相同的 class 但不能有 ids.
document.getElementById("numb").value.toString().length 您正在尝试使用此语句查找用户的输入。这将始终从一个特定项目中选择值。最好在事件处理程序中使用 $(this)（我想你正在使用 jquery 并且知道该怎么做）
$("input").addClass 使用这个..您的目标是文档中存在的所有输入元素。具体到您要定位的目标。

这样做： html:

<input class="numb" maxlength = 7 onblur="charCount()">
<input class="numb" maxlength = 7 onblur="charCount()">

JS:

$('.numb').on('blur', function() {
     // you access the current input elem with $(this)
     var inputElem = $(this);
     var char = inputElem.val().length;
     if (char == 7) {
         inputElem.addClass("green").removeClass("red");
     } else {
         inputElem.addClass("red").removeClass("green");
     }
});

Answer 3

您的代码中存在几个问题：

1) 当您使用此选择器时 $("input") 您正在将 class 应用于所有输入而不是特定输入。您需要创建一个针对模糊的特定输入的选择器。

$("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)">

更好的版本：

<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>

一个更好的解决方案是使用 IIFE。

我建议您浏览一些资源来学习事件处理： https://learn.jquery.com/events/handling-events/ https://api.jquery.com/category/events/ http://gregfranko.com/blog/jquery-best-practices/

希望对您有所帮助！

对多个表单字段使用 onblur 事件

Using onblur event for mutiple form fields

javascript

forms

jquery

onblur