Javascript 使用jQuery删除重复的输入字段

我有六个输入字段，用户在其中输入文本字符串。这些字符串不能完全相同，因此我需要在尝试重复输入时立即警告用户。我有以下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">

---

Fiddle:

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

请看这里：

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;
        });
    }
});

---

根据您的评论，我要做的是添加一个跟踪程序，跟踪原始输入的输入值，以便您可以进行比较，看看这是否是原始输入

请看这里：

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;
        });
    }
});

---

下面是我将如何做到这一点。请注意，我同时绑定到

键控

和

粘贴

。

keyup

的一个秘诀是，如果用户使用右键单击上下文菜单粘贴（hi-Grandge），则不会触发事件。这解决了这个问题。它还使用计时器来防止NNNN在上面的评论中提到的问题

//使用计时器函数执行此操作，以便在用户完成键入后400毫秒调用它
//不是每次击键后都会导致恼人的行为
$（“.alldifferent”）.on（'keyup-paste'，function（）{
var$this=$（this）；
keyupDelay（函数（）{
var val=$this.val（）；
$this.attr（'value'，val）；
如果（val！=''）{
//获取具有此值且索引大于0（重复项）的所有输入，将all设置为“”
var$dupes=$（'input[value=“”+val+']：gt（0）”）.val（“”）；
//如果我们必须清空，请通知用户
如果（$dupes.length>0）警报（'dupes.length不允许重复！'）；
}
}，400）；//延迟，根据需要进行调整
});
//与keyup一起使用的定时器功能
var keyupDelay=（函数（）{
var定时器=0；
返回函数（回调，毫秒）{
清除超时（计时器）；
定时器=设置超时（回调，毫秒）；
};
})();
下面是我将如何做的。请注意，我同时绑定到
键控
和
粘贴
。
keyup
的一个秘诀是，如果用户使用右键单击上下文菜单粘贴（hi-Grandge），则不会触发事件。这解决了这个问题。它还使用计时器来防止NNNN在上面的评论中提到的问题


//使用计时器函数执行此操作，以便在用户完成键入后400毫秒调用它
//不是每次击键后都会导致恼人的行为
$（“.alldifferent”）.on（'keyup-paste'，function（）{
var$this=$（this）；
keyupDelay（函数（）{
var val=$this.val（）；
$this.attr（'value'，val）；
如果（val！=''）{
//获取具有此值且索引大于0（重复项）的所有输入，将all设置为“”
var$dupes=$（'input[value=“”+val+']：gt（0）”）.val（“”）；
//如果我们必须清空，请通知用户
如果（$dupes.length>0）警报（'dupes.length不允许重复！'）；
}
}，400）；//延迟，根据需要进行调整
});
//与keyup一起使用的定时器功能
var keyupDelay=（函数（）{
var定时器=0；
返回函数（回调，毫秒）{
清除超时（计时器）；
定时器=设置超时（回调，毫秒）；
};
})();

这将删除整个输入字段。。我需要清除输入字段，以便用户可以“重试”。。这可能吗？忽略“删除”与“清除”的问题，此代码与OP的代码存在相同的问题，因为它删除了错误的输入。是的..而不是
.remove（）
使用
.val（“”）
抱歉，我以为您想从DOM中删除它。我已经更新了清除
输入的答案
@smaili你测试过这个吗？因为它给了我与问题中当前代码相同的效果。这将删除整个输入字段。。我需要清除输入字段，以便用户可以“重试”。。这可能吗？忽略“删除”与“清除”的问题，此代码与OP的代码存在相同的问题，因为它删除了错误的输入。是的..而不是
.remove（）
使用
.val（“”）
抱歉，我以为您想从DOM中删除它。我已经更新了清除
输入的答案
@smaili你测试过这个吗？因为它给了我与问题中当前代码相同的效果。“我试图删除重复的输入字段”-你的意思是要清除该字段中的值，而不是删除输入字段本身，对吗？（您确定keyup是最好使用的事件吗？“abc”和“abcde”是不同的值，但是您的代码不允许用户键入“abcde”，因为它会在“abc”处停止它们。）是的。我知道这个问题。但是，用户将使用USB条形码扫描仪扫描此字符串，因此我认为这不应该是一个问题。。如果你能想出一个替代方案，我将不胜感激。谢谢您可以使用keyup，但需要一个计时器来避免@nnnnnn出现“我正在尝试删除重复的输入字段”的问题，您的意思是要清除该字段中的值，而不是删除输入字段本身，对吗？（您确定keyup是最好使用的事件吗？“abc”和“abcde”是不同的值，但是您的代码不允许用户键入“abcde”，因为它会在“abc”处停止它们。）是的。我知道这个问题。但是，用户将使用USB条形码扫描仪扫描此字符串，因此我认为这不应该是一个问题。。如果你能想出一个替代方案，我将不胜感激。谢谢你可以使用keyup，但你需要一个计时器来避免@nnnnnn带来的问题！正是我想要的。谢谢@delighted0dexcellent！exac