Javascript 或 jQuery 接受文本字段小于 100 的数字

Question

在我的项目中，我有一个文本字段，我需要在其中接受小于或等于 100 的值。在该文本字段中，我如何通过 javascript 或 jquery 实现此目的。不知何故，我设法只接受文本框中的数字，但我如何限制它不接受大于 100 的数字。

这是我尝试只接受数字的代码

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

Answer 1

首先，您可以在 HTML5 中使用 number 类型，并将 max 属性设置为 100。

<input id="numberbox" type='number' max='100'>

这将允许您的浏览器在提交时检测到超过 100。但是，它不适用于旧版浏览器和某些智能手机。

或者，您可以这样做:

<input type='text' maxlength='2' pattern='^[0-9]$'>

但我觉得这个选项有点矫枉过正。但是，如果您想那样做，那取决于您。

在 jQuery 中，您可以这样做:

$('#numberbox').keyup(function(){
  if ($(this).val() > 100){
    alert("No numbers above 100");
    $(this).val('100');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='numberbox'>

请同时验证后端，只有足够知识的人可以轻松绕过这个。