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

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：

＆＃13;

＆＃13;

$(".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;
  }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;