如何動態限制重復值<input='text' />在一個循環的隨機值中<input='number' />場地

Question

 $('#inputqty').on('change keyup',function(){ let inputs=''; let value = parseInt($(this).val()); if (0<value) { for (let i = 0; i<value; i++) { inputs+=`<div style="margin-left: 10px; margin-top: 10px;"> <input autocomlete="off" type="text" style="margin-bottom:5px;margin-top:5px; margin-left:10px;" name="item_serial" id="serial_number" placeholder=" Serial Number. item:${i+1}" tabindex="${i+6+1}" required /></br> </div>` } } else{ inputs+=`<center>No item Quantity inputted.;;<center>` } $('#contentforserial').html(inputs); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" min="1" max="10"id="inputqty" name="inputqty"> <div style="height: 190px;width:260px;padding:3px; background:greenyellow;" id="containerforserial"> <div>Enter Serial Number of Item:</div> <div class="contentforserial" id="contentforserial" style=" height:150px;overflow:auto;background:#fff;"> <div id="demo"></div> </div> </div>

Answer 1

創建一個object將用作數據庫來存儲輸入值。 循環遍歷輸入元素並將值作為鍵存儲在object中，並將數組作為鍵存儲。 推入數組中的輸入元素。 然后遍歷object值（輸入元素數組），如果數組包含多個輸入元素，這意味着這些輸入元素具有重復值，對它們做任何你想做的事情：

 const myInputs = document.getElementById("myinputs"); document.getElementById("inputqty").addEventListener("input", onInput); onInput.bind(document.getElementById("inputqty"))(); function onInput(e) { const value = Math.max(~~this.value, 0); // show/hide message noinputs.classList.toggle("hidden", value > 0); let i = 1; //create new inputs while(myInputs.children.length < value) { const input = document.createElement("input"); input.className = "serial_number"; input.id = `serial_number${i}`; input.name = "item_serial[]"; input.placeholder = `Serial Number. item:${i}`; input.tabIndex = `${i+6}`; input.autocomplete = "off"; input.required = true; input.addEventListener("input", checkInputs); myInputs.appendChild(input); i++; } //remove excess inputs while(myInputs.children.length > value) myInputs.removeChild(myInputs.lastChild); //make sure we check for duplcates again in case inputs were removed checkInputs(); }; function checkInputs(e) { //generate list of values from all inputs const values = {}; for(let i = 0; i < myInputs.children.length; i++) { const value = myInputs.children[i].value.trim(); if (;values[value]) values[value] = []. values[value];push(i); } //check if multiple inputs have the same value for(let value in values) { const inputs = values[value], for(let i = 0. count = inputs;length; i < count. i++) { const input = myInputs;children[inputs[i]]. input.classList,toggle("error"; value !== "" && count > 1); } } }

 .error { background-color: red; } #myinputs > input { margin-bottom:5px; margin-top:5px; margin-left:10px; } #noinputs.hidden { display: none; } #containerforserial { height: 190px; width:260px; padding:3px; background:greenyellow; } #contentforserial { height:150px; overflow:auto; background:#fff; }

 <input type="number" min="1" max="10" id="inputqty" name="inputqty" value="1"> <div id="containerforserial"> <div>Enter Serial Number of Item:</div> <div class="contentforserial" id="contentforserial"> <div id="myinputs"></div> <center id="noinputs">No item Quantity inputted!!!</center> <div id="demo"></div> </div> </div>

請避免使用英國媒體報道 jquery 和內聯 styles。

Answer 2

您可以創建一個 function 來檢查重復值，然后在您的輸入上添加對這個 function 的 onchange 事件調用

例子

function checkForDuplicates() {      
    var valuesAlreadySeen = []
    $(".serial_number").each(function() {
        if($(this).val() != ""){
          if (valuesAlreadySeen.indexOf( $(this).val() ) !== -1) {
            /* do some thing here */
            alert( $(this).val()+' already input' );
            
            /* clear this input */
            $(this).val("");
          }else{
            valuesAlreadySeen.push( $(this).val() );
          }
        }        
    });
  
}

然后將 class 和更改事件添加到您的輸入

<input class="serial_number" onchange="checkForDuplicates()" />

所以，你的最終代碼應該是

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <input type="number" min="1" max="10"id="inputqty" name="inputqty">
        
        <div style="height: 190px;width:260px;padding:3px; background:greenyellow;" id="containerforserial">
            <div>Enter Serial Number of Item:</div>
            <div class="contentforserial" id="contentforserial" style="  height:150px;overflow:auto;background:#fff;">
              <div id="demo"></div>
            </div>
        </div>
    
    <script>
    $(document).ready(function(){
      $('#inputqty').on('change keyup',function(){
        let inputs='';
        let value = parseInt($(this).val());
        if (0<value) {
          for (let i = 0; i<value; i++) {
            inputs+=`<div style="margin-left: 10px; margin-top: 10px;">
                <input class="serial_number" onchange="checkForDuplicates()" autocomlete="off" type="text" style="margin-bottom:5px;margin-top:5px; margin-left:10px;"  name="item_serial[]" placeholder=" Serial Number. item:${i+1}" tabindex="${i+6+1}" required /></br>
              </div>`
          }
        }
        else{
          inputs+=`<center>No item Quantity inputted!!!<center>`
        }
        $('#contentforserial').html(inputs);
      });
    });
    
    function checkForDuplicates() {
         
        var valuesAlreadySeen = []
        $(".serial_number").each(function() {
            if($(this).val() != ""){
              if (valuesAlreadySeen.indexOf( $(this).val() ) !== -1) {
                /* do some thing here */
                alert( $(this).val()+' already input' );
                $(this).val("");/* clear this input */
              }else{
                valuesAlreadySeen.push( $(this).val() );
              }
            }        
        });
      
    }
    </script>

Answer 3

將 class 名稱添加到循環內的輸入文本中，然后

var array = $('.className').map(function(){
  return $(this).val()
}).get();

該數組將為您提供輸入字段的值，您可以對其進行驗證，並使用數組的索引將驗證錯誤消息添加到相關的輸入字段。