数値入力フィールドの集まりの文字数の制限

Question

thisからの参照を使用しましたが、複数の入力テキストフィールドの質問に正確に挑戦したいと思います。私はさらにタイプしないようにユーザーを制限し、getElementByIdの代わりにgetElementsByClassNameを使用したいと思います。

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