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

有些点交配：

首先，元素在一个html文档中不应该具有相同的id。他们可以拥有相同的班级但不是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 2

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

2.-然后使用＆＃34;此＆＃34; 来引用正在使用的输入这是一个有效的解决方案。希望它有所帮助！

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

$("input").addClass("green").removeClass("red");

2）您对两个输入元素使用相同的ID

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

3）你混合使用香草javascript和jQuery的选择器会导致问题，为了清楚起见，最好使用其中一个。

VERSION：这是对您已经提出的内容进行最少更改的版本，但是您附加事件的方式效率很低。

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

3 个答案: