输入类型编号只允许2个数字

时间:2015-10-23 09:59:35

标签: javascript jquery html5

如何在输入类型编号上设置0到99之间的范围?我使用的是HTML5属性(min="0" max="99"),但它不起作用,据我所知,某些浏览器不支持此类属性。

所以我使用这个阻止非数字字符的脚本,但我想将数字限制为最多99(仅2位数)。我怎么能这样做?

另外,我想让用户使用键盘输入数字。

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

jsFiddle

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

如果你删除$(“。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>

答案 2 :(得分:0)

你可以像这样设置:

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

答案 3 :(得分:0)

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)">

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