Question

我有六个输入字段，用户输入文本字符串。这些字符串不能相同，因此我需要在尝试重复条目时立即警告用户。我有以下jQuery，当有重复的条目时，它很好地提醒用户。但是，我正在尝试删除重复的输入字段，此代码实际上删除了第一次出现的重复字符串。是否可以提醒用户有重复的条目并删除正确的重复输入字段？谢谢你的帮助

HTML：

<input type="text" class="form-control alldifferent" id="barcode0" name="barcode0" placeholder="barcode 1">
<input type="text" class="form-control alldifferent" id="barcode1" name="barcode1" placeholder="barcode 2">
<input type="text" class="form-control alldifferent" id="barcode2" name="barcode2" placeholder="barcode 3">
<input type="text" class="form-control alldifferent" id="barcode3" name="barcode3" placeholder="barcode 4">
<input type="text" class="form-control alldifferent" id="barcode4" name="barcode4" placeholder="barcode 5">
<input type="text" class="form-control alldifferent" id="barcode5" name="barcode5" placeholder="barcode 6">

jQuery：

 $(".alldifferent").keyup(function() {
      var val = $(this).val();
      if (val != '') {
          $(".alldifferent").not(this).each(function() {
              if ($(this).val() == val) {
                  alert("Error, Duplicate Barcode " + val);
                  val = $(this).val('');
                  return false; // stop the loop
              }
          });
      }
  });

小提琴：click here

Answer 1

以下是我的表现方式。请注意，我绑定了keyup和paste。 keyup单独的一个问题是，如果用户使用右键单击上下文菜单进行粘贴（嗨爷爷），则不会触发该事件。这解决了这个问题。它还使用计时器来防止nnnnnn在上面的评论中提到的问题

jsFiddle

＆＃13;

// do this with a timer function so that it is called 400 ms after the user finishes typing 
// not after every keystroke which will often lead to annoying behaviour
$(".alldifferent").on('keyup paste',function(){
  var $this = $(this);
  keyupDelay(function() {
    var val = $this.val();
    $this.attr('value', val);
    if (val != '') {
      // get all inputs with this value and and index greater than 0 ( the duplicates ) setting all to ''
      var $dupes = $('input[value="' + val + '"]:gt(0)').val(''); 
      // if we had to empty any, alert the user
      if ($dupes.length > 0) alert('Duplicates are not allowed!');
    }
  }, 400);// delay, adjust as needed
});


// timer function to be used with keyup
var keyupDelay = (function() {
  var timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" class="form-control alldifferent" id="barcode0" name="barcode0" placeholder="barcode 1">
<input type="text" value="" class="form-control alldifferent" id="barcode1" name="barcode1" placeholder="barcode 2">
<input type="text" value="" class="form-control alldifferent" id="barcode2" name="barcode2" placeholder="barcode 3">
<input type="text" value="" class="form-control alldifferent" id="barcode3" name="barcode3" placeholder="barcode 4">
<input type="text" value="" class="form-control alldifferent" id="barcode4" name="barcode4" placeholder="barcode 5">
<input type="text" value="" class="form-control alldifferent" id="barcode5" name="barcode5" placeholder="barcode 6">

＆＃13;

Answer 2

根据您的评论，我要做的是添加一个跟踪器，跟踪原始输入的输入值，以便您可以比较以查看它是否是原始输入。

见这里：

var tracker = {};
$(".alldifferent").keyup(function() {
    var val = $(this).val();
    if (val != '') {
        $(".alldifferent").each(function() {
            var input = $(this);
            var thisval = input.val();

            // ignore empty values
            if (thisval.length === 0) return;

            // get the one being tracked
            var trackedInput = tracker[thisval];
            if (trackedInput && !input.is(trackedInput) && trackedInput.val() === thisval) {
                // if we get here, it means this input wasn't the first to have this value
                alert("Error, Duplicate Barcode " + thisval);
                input.val('');
                return;
            }

            // if we get here, it means this value is unique, so add it to the tracker
            tracker[thisval] = input;
        });
    }
});

使用jQuery

2 个答案:

jsFiddle