我有一個 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 代碼中進行哪些更改，以便在輸入重復代碼時，應該出現警報消息“發現重復代碼”。
2 回答
慕雪6442864
TA貢獻1812條經驗 獲得超5個贊
您需要為每個項目添加一個事件監聽器，而不是為所有項目添加事件監聽器。然后計算具有相同值的輸入，如果超過 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 個事件偵聽器插入到同一節點元素，否則它們將級聯運行，從而引發不需要的行為。
一只萌萌小番薯
TA貢獻1795條經驗 獲得超7個贊
您可以使用類似的方法，將 jQuery 對象轉換為數組來映射值并查找重復項。我添加了一個選項來向重復的輸入添加樣式，以便用戶知道哪些輸入是重復的。
function checkDuplicates(){
var codes = $('input[name^="code"]').toArray().map(function(element){
return element.value;
})
var duplicates = codes.some(function(element, index, self){
return element && codes.indexOf(element) !== index;
});
return duplicates;
}
function flagDuplicates(){
var inputs = $('input[name^="code"]').toArray();
var codes = inputs.map(function(element){
return element.value;
});
var duplicates = 0;
codes.forEach(function(element, index){
var duplicate = element && codes.indexOf(element) !== index;
if(duplicate){
inputs[index].style.backgroundColor = "red";
inputs[codes.indexOf(element)].style.backgroundColor = "red";
duplicates++
}
});
return duplicates;
}
$('input[name^="code"]').on("change", function(){
//var duplicates = checkDuplicates(); // use this if you only need to show if there are duplicates, but not highlight which ones
var duplicates = flagDuplicates(); // use this to flag duplicates
if(duplicates){
alert(duplicates+" duplicate code(s)");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="code-1" type="text">
<input name="code-2" type="text">
<input name="code-3" type="text">
- 2 回答
- 0 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消