突出显示具有相同值的输入字段

时间:2016-05-05 04:07:02

标签: javascript jquery html css

我有一些输入字段:

<input type="text" id="original" name="itens[]">
<input type="text" id="clone1" name="itens[]">
<input type="text" id="clone2" name="itens[]">
<input type="text" id="clone3" name="itens[]">

如果他们的值重复,我希望他们改变颜色。基本上是循环中的循环。像这样:

$('input[name="itens\\[\\]"]').each(function () {
    current_value = $(this).val();
    current_id = $(this).attr("id");
    $('input[name="itens\\[\\]"]').each(function () {
        if ($(this).val() == current_value && $(this).attr("id") != current_id) {
            $(this).css("background", "red");
        } else {
            $(this).css("background", "white");
        }
    });
});

这产生了不稳定的行为,即使登录很多我也似乎无法理解的控制台。有时候它有效,有时它不起作用。我认为比较失败可能是因为类型。真的可以使用一些帮助。

3 个答案:

答案 0 :(得分:1)

您可以参考我的代码:

for (i=0;i<10;i++){
    document.getElementById("text")+="a";
    delay(500);    
}

jsfiddle

答案 1 :(得分:1)

我认为会发生的情况是,虽然你有匹配的逻辑工作并且它确实应用了背景颜色,但是如果它然后进行比较,它与下一个输入不匹配,它会删除先前正确的匹配。所以我在这里所做的就是打破if else并在每次模糊事件后都应用白色背景。现在当它找到匹配时,它只会添加颜色,而不是删除。

$('input[name="itens\\[\\]"]').blur(function() {
  $('input[name="itens\\[\\]"]').css("background", "white");
  $('input[name="itens\\[\\]"]').each(function() {
    current_value = $(this).val();
    current_id = $(this).attr("id");
    $('input[name="itens\\[\\]"]').each(function() {
      if ($(this).val() == current_value && $(this).attr("id") != current_id) {
        $(this).css("background", "red");
      }
    });
  });
});

http://codepen.io/partypete25/pen/WwLZmO?editors=1010

答案 2 :(得分:0)

如果存在或不存在旧值,则需要检查输入值。试试以下代码:

  <input type="text" id="original" name="itens[]" value="2">
<input type="text" id="clone1" name="itens[]" value="2">
<input type="text" id="clone2" name="itens[]" value="1">
<input type="text" id="clone3" name="itens[]" value="3">

  <script>
   var inputValues =[] , repeatValues =[];

$('input[name="itens\\[\\]"]').each(function () {
    inputValues.push($(this).val());
 })
 inputValues = inputValues.sort();
  for(var count =0 ; count < inputValues.length; count++){
        if(inputValues[count + 1] == inputValues[count])
            repeatValues.push(inputValues[count])
  }
    $('input[name="itens\\[\\]"]').each(function () {
        if ($.inArray($(this).val(),repeatValues) != -1) {
            $(this).css("background", "red");
        } else {
            $(this).css("background", "white");
        }
    });

https://jsfiddle.net/8rbkf75t/1/