如何檢查，如果你已經使用JS

Question

我得到了堆放着這個問題已經進入了動態輸入數量：

1. 我只是想檢查，如果我輸入的號碼在動態輸入已經輸入，如果是，則不能再次輸入該號碼，除非將其刪除。
2. 只能輸入數字最多的輸入數量（例如，如果你有10個輸入，那麼你只能進入不大於10）

$(document).ready(function(){ 
 
    var arrayLen = $('.question').length; 
 
    var numArray = []; 
 
    var convertedArray; 
 
    for(i = 1; i <= arrayLen; i++){ 
 
    \t numArray.push(i); 
 
    } 
 
    
 
    var currentVal; 
 
    var maxAllowed = numArray[numArray.length - 1]; 
 
    var hasValue = []; 
 
    \t 
 
    $('.question').on('input', function(){ 
 
    currentVal = this.value; 
 
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1'); 
 
    }).bind('keyup', function(){ 
 
    \t if(currentVal <= maxAllowed){ 
 
    \t $("#result").html("available"); 
 
    } else{ 
 
    \t $("#result").html("not available"); 
 
     return false; 
 
    } 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 
<input type="text" class="question" placeholder="trueFalse"><br><br> 
 
<input type="text" class="question" placeholder="shortAnswer"><br><br> 
 
<input type="text" class="question" placeholder="shortAnswer"><br><br> 
 
<input type="text" class="question" placeholder="description"><br><br> 
 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 
<input type="text" class="question" placeholder="trueFalse"><br><br> 
 
<input type="text" class="question" placeholder="trueFalse"><br><br> 
 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 

 
<span id="result"></span>

Answer 1

請勿在input事件中執行此操作，因爲當您處於輸入輸入的中間時，它可能與另一個輸入匹配，並且您不會讓它們完成編輯。您應該使用blur事件;這會在他們嘗試離開輸入字段時觸發。

當他們改變輸入時，循環所有其他輸入，並檢查這個值是否與其他值相同。如果是，則顯示錯誤。

$(document).ready(function() { 
 
    var maxAllowed = $(".question").length; 
 
    $('.question').on('blur', function() { 
 
    var currentVal = this.value.trim(); 
 
    if (currentVal == '') { 
 
     return; 
 
    } 
 
    var msg = "Available"; 
 
    if (currentVal < 1 || currentVal > maxAllowed) { 
 
     msg = "Not available"; 
 
    } else { 
 
     $('.question').not(this).each(function() { 
 
     if (this.value == currentVal) { 
 
      msg = "Not available"; 
 
      return false; // Stop the .each loop 
 
     } 
 
     }); 
 
    } 
 
    $("#result").text(msg); 
 
    if (msg == "Not available") { 
 
     $(this).focus(); // Put them back in the bad input field 
 
     return false; 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 
<input type="text" class="question" placeholder="trueFalse"><br><br> 
 
<input type="text" class="question" placeholder="shortAnswer"><br><br> 
 
<input type="text" class="question" placeholder="shortAnswer"><br><br> 
 
<input type="text" class="question" placeholder="description"><br><br> 
 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 
<input type="text" class="question" placeholder="trueFalse"><br><br> 
 
<input type="text" class="question" placeholder="trueFalse"><br><br> 
 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 

 
<span id="result"></span>

Answer 2

我沒有做任何驗證或控制什麼，當你的條件得到滿足的情況發生作用。

$(document).ready(function() { 
 

 
    var $inputObj = $("#input-div input[type=text]"); 
 
    var inputCount = $inputObj.length; 
 

 
    // alert(inputCount); 
 

 
    $('#question\\[\\]').on('input', function() { 
 

 
    var $currInput = $(this); 
 
    var currInputVal = $currInput.val(); 
 
    console.log(currInputVal); 
 

 
    var cond1 = currInputVal < inputCount; 
 
    var cond2 = isFreshInput($currInput); 
 

 
    //console.log("cond2:" + cond2); 
 
    if (cond1 === false || cond2 === false) { 
 
     //TODO action when conditions are satisfied  
 
     $("#result").html("not available"); 
 
     alert("Either value already exist or number is too large"); 
 
    } else { 
 
     $("#result").html("available"); 
 
    } 
 

 
    }); 
 

 
    function isFreshInput($currInput) { 
 

 
    var currInputVal = Number($currInput.val()); 
 
    var res = true; 
 

 
    $inputObj.not($currInput).each(function() { 
 

 
     let inputVal = Number($(this).val()); 
 

 
     console.log("inputVal:" + inputVal); 
 

 

 
     if (currInputVal === inputVal) { 
 
     console.log("input already exist!"); 
 
     $(this).css({ 
 
      "border": "solid red 1px" 
 
     }) 
 
     res = false; 
 
     // return false; // break loop once found 
 
     } 
 
    }); 
 
    console.log("res:" + res); 
 
    return res; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="input-div"> 
 
    <input type="text" id="question[]" placeholder="multipleChoice"><br><br> 
 
    <input type="text" id="question[]" placeholder="trueFalse"><br><br> 
 
    <input type="text" id="question[]" placeholder="shortAnswer"><br><br> 
 
    <input type="text" id="question[]" placeholder="shortAnswer"><br><br> 
 
    <input type="text" id="question[]" placeholder="description"><br><br> 
 
    <input type="text" id="question[]" placeholder="multipleChoice"><br><br> 
 
    <input type="text" id="question[]" placeholder="multipleChoice"><br><br> 
 
    <input type="text" id="question[]" placeholder="trueFalse"><br><br> 
 
    <input type="text" id="question[]" placeholder="trueFalse"><br><br> 
 
    <input type="text" id="question[]" placeholder="multipleChoice"><br><br> 
 
    <input type="text" id="question[]" placeholder="multipleChoice"><br><br> 
 
</div> 
 
<span id="result"></span>

Answer 3

在這裏，你去了一個解決方案https://jsfiddle.net/33zeL2fa/9/

$(document).ready(function(){ 
 
    var arrayLen = $('input.question').length; 
 
    var numArray = []; 
 
    var convertedArray = []; 
 
    for(i = 1; i <= arrayLen; i++){ 
 
    \t numArray.push(i); 
 
    } 
 

 
    $('input.question').keydown(function(e){ 
 
\t \t var val = $(this).val(); 
 
    \t if(e.which === 8 || e.keyCode === 8){ 
 
    \t numArray.push(parseInt($(this).attr('newval'))); 
 
     $(this).removeAttr('newval'); 
 
    } else { 
 
    \t val += e.key; 
 
     if(numArray.indexOf(parseInt(val)) != -1){ 
 
     $('#result').html("available"); 
 
     $(this).attr('newval', e.key); 
 
     numArray.splice(numArray.indexOf(parseInt(val)), 1); 
 
     } else{ 
 
     $("#result").html("not available"); 
 
     e.preventDefault(); 
 
     } 
 
    } 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 
<input type="text" class="question" placeholder="trueFalse"><br><br> 
 
<input type="text" class="question" placeholder="shortAnswer"><br><br> 
 
<input type="text" class="question" placeholder="shortAnswer"><br><br> 
 
<input type="text" class="question" placeholder="description"><br><br> 
 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 
<input type="text" class="question" placeholder="multipleChoice"><br><br> 
 
<input type="text" class="question" placeholder="trueFalse"><br><br> 
 

 
<span id="result"></span>

希望這會幫助你。