仅允许在数字输入类型中输入2个数字。

Question

如何在数字输入框中设置0到99之间的范围？我正在使用HTML5属性（min="0" max="99"），但它没有起作用，而且据我所知，某些浏览器不支持这种属性。 因此，我正在使用此脚本来阻止非数字字符，但我想将数字限制在最大值为99（仅限2位数）。我该怎么做？ 另外，我希望允许用户使用键盘输入数字。

$(".js-number").numeric();

jsFiddle

- brunodd

---

HTML5 的 "min" 属性是简单属性，其取值范围为2。 - CodeLove

@CodeLove，不起作用了。。 - Rayon

$(".js-number").numeric(); 有任何库吗？ - Tushar

它正在运行。我已更新 http://jsfiddle.net/gnLz004r/2/ 放入两个以上的数字，然后按回车或单击任何位置，它会说“请选择大于2的值……” - CodeLove

@CodeLove，在Chrome 46.0.2490.80中没有这样说。操作者想要限制数字。 - Rayon

然后使用JavaScript跳转到http://jsfiddle.net/ySt7S/86/。 - CodeLove

Answer 1

<input class="test-input" type="number" maxlength="12" />
<script>
$('.test-input').unbind('keyup change input paste').bind('keyup change input paste',function(e){
    var $this = $(this);
    var val = $this.val();
    var valLength = val.length;
    var maxCount = $this.attr('maxlength');
    if(valLength>maxCount){
        $this.val($this.val().substring(0,maxCount));
    }
}); 
</script>

- Kishore Sahasranaman

Answer 2

如果您删除$(".js-number").numeric();，您的示例将起作用；但是您可以编辑输入。
maxlength属性适用于文本输入类型，因此我猜JavaScript验证是不可避免的。

 <input type="number" class="js-number" min="0" max="99" value="0">   
 <script>
    $(".js-number").bind('keydown', function(e){
       var targetValue = $(this).val();
       if (e.which ===8 || e.which === 13 || e.which === 37 || e.which === 39 || e.which === 46) { return; }

       if (e.which > 47 &&  e.which < 58  && targetValue.length < 2) {
          var c = String.fromCharCode(e.which);
          var val = parseInt(c);
          var textVal = parseInt(targetValue || "0");
          var result = textVal + val;

          if (result < 0 || result > 99) {
             e.preventDefault();
          }

          if (targetValue === "0") {
            $(this).val(val);
            e.preventDefault();
          }
       }
       else {
           e.preventDefault();
       }
    });
 </script>

- Sagi

---

它可以工作。您不能通过按键来编辑它，只能通过点击输入框的箭头进行编辑。 - Sagi

但这并不理想。我希望允许用户使用键盘输入数字。 - brunodd

你应该提到它。你需要不同的JavaScript验证方法。 - Sagi

我刚刚在问题上添加了这个。 - brunodd

Answer 3

function format(input){
    if(input.value < 0) input.value=Math.abs(input.value);
    if(input.value.length > 2) input.value = input.value.slice(0, 2);
    $(input).blur(function() {
       // if(input.value.length == 1) input.value=0+input.value;
       // if(input.value.length == 0) input.value='01';
       //* if you want to allow insert only 2 digits *//
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="number" step="1" oninput="format(this)">

它对我有效...希望对你也有效 :)

- Urvish Joshi

Answer 4

您可以设置如下内容：

<input type="text" class="js-number" maxlength="2">

- Vijay Astound

---

https://dev59.com/rWsy5IYBdhLWcg3wvgdl - Vijay Astound

@RayonDabre 你有检查那个fiddle吗？ - brunodd

@brunodd，maxlength会起作用，但如果类型不是数字，它也会接受字符。 - Rayon

这是一个错误的答案，标题说“仅允许2个数字”，谁在点赞这个答案？ - guradio

@RayonDabre 看起来如果我移除 type="number" 就可以正常工作：http://jsfiddle.net/brunodd/gnLz004r/7/ - brunodd

Answer 5

您可以在HTML的input中使用maxlength="2"，并在Javascript函数中使用this.value = this.value.replace(/[^\d]/, '')

• maxlength="2"：它仅允许通过文本输入两个条目（假设是数字），因此最大的两位数是99，最小的两位数是-9（-也被视为一个条目），但如果去掉-符号，则最小数字是00，这解决了00-99的范围问题

现在input是type=text，因此任何字母都可以与符号（- @ $...）一起输入，为了解决这个问题，使用JavaScript正则表达式

• this.value = this.value.replace(/[^\d]/, '')：它从每个数字输入中获取值并检查它是否为数字。如果是数字，则该输入将保留原样，但如果输入不是数字，则将其替换为''，即从输入中删除。因此，只有数字输入被解决，而没有-符号

document.getElementsByClassName("orderUnits")[0].addEventListener("input", amountofUnits);

function amountofUnits() {
  this.value = this.value.replace(/[^\d]/, '')
}

<input type="text" class="orderUnits" maxlength="2">

- Rana