如何使用JS

Question

我遇到了这个问题：

1. 我只是想检查我输入的号码是否已输入动态输入中，如果是，则不能再次输入该号码，除非您将其删除。
2. 您只能输入一个输入数量的数字（例如，如果您有10个输入，那么您只能输入不大于10）
＆＃13;
＆＃13;
$(document).ready(function(){
  var arrayLen = $('.question').length;
  var numArray = [];
  var convertedArray;
  for(i = 1; i <= arrayLen; i++){
  	numArray.push(i);
  }
 
  var currentVal;
  var maxAllowed = numArray[numArray.length - 1];
  var hasValue = [];
  	
  $('.question').on('input', function(){
    currentVal = this.value;
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
  }).bind('keyup', function(){
  	if(currentVal <= maxAllowed){
    	$("#result").html("available");
    } else{
    	$("#result").html("not available");
      return false;
    }
  });
 
});
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

我没有做任何验证或控制当你的条件满足时会发生什么行动。

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

您可以使用解决方案https://jsfiddle.net/33zeL2fa/9/

＆＃13;

＆＃13;

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

  $('input.question').keydown(function(e){
		var val = $(this).val();
  	if(e.which === 8 || e.keyCode === 8){
    	numArray.push(parseInt($(this).attr('newval')));
      $(this).removeAttr('newval');
    } else {
    	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();
      }
    }
  });
  
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这会对你有所帮助。

Answer 3

请勿在{{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;
    }
  });

});