Jquery输入倍数(keyup）

Jquery input number in multiples (keyup)

本文关键字：keyup 输入 Jquery      更新时间：2023-09-26

如何使input元素只接受50的倍数？

我知道我们可以将step="50"指定为属性，但我更喜欢由keyup事件触发的解决方案。

我发现了这个代码，它阻止用户输入小于50的数字。

问题：如何调整此代码，以便只能输入50的倍数？

$('#numberbox').keyup(function(){
  if ($(this).val() < 50){
    alert("Minimum Quantity: 50");
    $(this).val('50');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numberbox" type='number'>

使用模运算符

var multiple = 50;
$('#numberbox').keyup(function(){
   if (parseInt($(this).val()) % multiple ) {
      alert("Only multiples of " + multiple + " allowed");
      $(this).val(multiple);
   }
});

我更喜欢blur而不是keyup，因为keyup会保持警报状态。要知道它是否是50的倍数，请使用modulo（即%）检查条件，如parseInt($(this).val())%50 != 0

$('#numberbox').blur(function(){
  if (parseInt($(this).val())%50 != 0){
    alert("Multiples of 50 should be entered");
    $(this).val('50');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numberbox" type='number'>

您可以使用Remainder（%）来执行此操作，请查看下面的示例。

余数运算符返回一个操作数除以第二个操作数后剩下的余数。它总是取被除数的符号，而不是除数。

$('#numberbox').keyup(function(){
  if ($(this).val()%50==0){
    $('#result').text($(this).val()+' is multiple of 50');
  }else{
     $('#result').text($(this).val()+' is not a multiple of 50');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numberbox" type='number'>
<span id='result'></span>

希望这能有所帮助。

相关文章：