javascript - 防止用户在 javascript 的文本输入中输入重复的条目

Question

我有一个 DOM，我想在其中防止用户在 html 文本输入中输入重复的条目。

上述DOM不受用户控制。它是通过 php 来的。

此时此刻，我只关注name="code[]"。

这是我尝试过的:

$(function(){

$('input[name^="code"]').change(function() {

    var $current = $(this);

    $('input[name^="code"]').each(function() {
        if ($(this).val() == $current.val())
        {
            alert('Duplicate code Found!');
        }

    });
  });
});

问题陈述:

我想知道我应该在上面的 javascript 代码中进行哪些更改，以便在输入重复代码时，应该出现警报消息“发现重复代码”。

Answer 1

您需要为每个项目添加一个事件监听器，而不是为所有项目添加一个事件监听器。然后计算具有相同值的输入，如果超过 1 个，则为重复。

同时忽略未填充的输入。

检查以下代码片段:

$('input[name*="code"]').each(function() { 
  $(this).change(function(){ 
    let value = $(this).val();
    let count = 0;
    $('input[name*="code"]').each(function() { 
      if ($(this).val() != '' && $(this).val() == value) {
        count++;
        if (count > 1) alert('duplicate');
      }
    });
  });
  $(this).addClass('e');
});


$('#createInput').on('click', function(){
  let newInput = document.createElement("input");
  newInput.name = 'code[]';
  newInput.type = 'text';
  newInput.className = 'whatever';
  $('#inputGroup').append(newInput);
  // repeat the eventlistener again:
    $('input[name*="code"]:not(.e').each(function() { 
      $(this).change(function(){ 
        let value = $(this).val();
        let count = 0;
        $('input[name*="code"]').each(function() { 
          if ($(this).val() != '' && $(this).val() == value) {
            count++;
            if (count > 1) alert('duplicate');
          }
        });
      });
      $(this).addClass('e');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inputGroup">
  <input name="code-1" type="text" class="whatever">
  <input name="code-2" type="text" class="whatever2">
  <input name="code-3" type="text" class="whatever3">
</div>
<input type="button" id="createInput" value="Add input">

编辑:现在可以使用动态创建的元素。类“e”用作标志，不要将 2 个事件监听器插入到同一节点元素，否则它们将级联运行，引发不需要的行为。