限制數字輸入字段集合中的字符數

Question

我已經使用了來自該問題的參考， 但是我想確切地實現針對多個輸入文本字段的問題。 我想限制用戶不要再輸入，而是使用了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>

Java腳本

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