如何检查，如果你已经使用JS

问题描述：

我得到了堆放着这个问题已经进入了动态输入数量：如何检查，如果你已经使用JS

我只是想检查，如果我输入的号码在动态输入已经输入，如果是，则不能再次输入该号码，除非将其删除。
只能输入数字最多的输入数量（例如，如果你有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>

你不能通过关键事件来做到这一点，因为如果有10个输入，其中一个已经包含数字“1”，那么你将无法在另一个输入数字“10”（除非你从剪贴板粘贴“10”而不是输入“1”后跟一个“0”）。 – nnnnnn

ID必须是唯一的，你不能有多个'id =“question []”'输入。 – Barmar

@nnnnnn确实如此。那么，也许你对我的问题有了答案？因为我认为你是一个JavaScript大师。 – Jonjie

答

请勿在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>

这太好了。但是，第二个问题呢？ – Jonjie

这不是什么'currentVal> arrayLen'检查？ – Barmar

这是用'on（'submit'）'工作吗？ – Jonjie

答

我没有做任何验证或控制什么，当你的条件得到满足的情况发生作用。

$(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>

答

在这里，你去了一个解决方案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>

希望这会帮助你。

如何检查，如果你已经使用JS

相关推荐