Jqueryキーアップが両方の数字の後にトリガーされました

Question

$(".maxQtyclass").keyup(function() { 
    var maxQty = $(this).attr('data-qty'); 
    //lets say it is 8 
    if ($(this).val() > maxQty 
     && e.keyCode != 46 // delete 
     && e.keyCode != 8 // backspace 
    ) { 
     $(this).val(maxQty); 
     alert('Only ' + maxQty + ' unit(s) available!'); 
     return false; 
    } 
}); 

私は8を押したときに（8が8より大きいのでメッセージは表示されません）。私が9を押すと、8単位しか使用できないことを警告します。これまではとても良いですが、私が12を押すと警告を発することはありません、なぜですか？ 12は> 8より大きい。keyupのように見えるのは、最初に入力された数字だけを読むということです。数字12を読むためにキーアップを強制するには？

Answer 1

あなたは「12」>「8」が失敗しているので、それは文字列の比較を行っている、ので、キーコード

$(".maxQtyclass").keyup(function (e) { 
 
     var maxQty = $(this).attr('data-qty'); 
 
     //lets say it is 8\ 
 
     if (parseInt($(this).val()) > parseInt(maxQty) 
 
      && e.keyCode != 46 // delete 
 
      && e.keyCode != 8 // backspace 
 
      ) { 
 
       $(this).val(maxQty); 
 
       console.log('Only ' + maxQty + ' unit(s) available!'); 
 
       return false; 
 
      } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="maxQtyclass" data-qty="8"/>

Answer 2

を取得するために、関数内でイベントオブジェクトを渡す必要があります。以下のようにintに変換して比較してみてください。

$(".maxQtyclass").keyup(function() { 
     var maxQty = $(this).attr('data-qty'); 
     //lets say it is 8 
     if (parseInt($(this).val()) > parseInt(maxQty) 
      && e.keyCode != 46 // delete 
      && e.keyCode != 8 // backspace 
      ) { 
      $(this).val(maxQty); 
      alert('Only ' + maxQty + ' unit(s) available!'); 
      return false; 
     } 
    }); 

Answer 3

入力テキストをnumberに解析する必要があります。あなたのシナリオでは、文字列データ型で "12"> "8"を比較し、文字列の1と1で始まる12が8未満であるため、条件はfalseを返します。

$(".maxQtyclass").keyup(function() { 
    var maxQty = parseInt($(this).attr('data-qty')); 
    //lets say it is 8 
    if (parseInt($(this).val()) > maxQty 
     && e.keyCode != 46 // delete 
     && e.keyCode != 8 // backspace 
    ) { 
     $(this).val(maxQty); 
     alert('Only ' + maxQty + ' unit(s) available!'); 
     return false; 
    } 
}); 

すべての数値がintであることを確認してください。