javascript - 限制数字输入字段集合中的字符数

Question

我使用了 this 中的引用资料问题，我想准确地实现问题所要求的多个输入文本字段。我想限制用户不要进一步键入，并使用 getElementsByClassName 而不是 getElementById。

HTML

   <td>
<input id="quantity_scroll" cart_id="<?php echo $cart_row['id']; ?>" min="1" type ="number" max="99" value="<?php echo $cart_row['quantity'] ;?>" oninput = "checkLength()"  class="form-control form-quantity" style=" width: 60px;text-align: left;" >
</td>

Javascript

function checkLength(){

var elements = document.getElementsByClassName("form-quantity");
var y;
var ele = elements.length/2;

for(y=0; y < ele; y++){
    var length = elements[y].value.length;

      if(length <= 2){

        return true;
    }else{  
            var value = elements[y].value;
             value = value.substring(0, value.length-1);    
             document.getElementsByClassName("form-quantity")[y].value = value;
        }
    }
}

但是，用户仅在第一个输入框中受到限制，而在其他输入框中则不受限制。我尝试了不同的方法，但无法理解为什么它没有发生。

Answer 1

检查下面的代码。它将限制用户输入的数字不得超过 3 位。您只需要确保所有输入字段都具有相同的类 form-field:

$(".form-field").on('input', function() {
  var enteredVal = $(this).val();
  if (enteredVal.length > 3) {
    $(this).val(enteredVal.substring(0, enteredVal.length - 1));
    console.log('More than 3 characters not allowed.');
    return;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='form-field' />