对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?


当前回答

梅考·莫拉的回答是一个好的开始。 然而,他的解决方案意味着当您输入第二个数字时,所有字段的编辑都会停止。因此,您不能更改值或删除任何字符。

下面的代码停在2,但允许继续编辑;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

其他回答

梅考·莫拉的回答是一个好的开始。 然而,他的解决方案意味着当您输入第二个数字时,所有字段的编辑都会停止。因此,您不能更改值或删除任何字符。

下面的代码停在2,但允许继续编辑;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

简单的解决方法,

输入滚动事件 通过键盘复制粘贴 通过鼠标复制粘贴 输入类型等情况 <输入id = " maxLengthCheck " name = " maxLengthCheck " type = "数量" 一步= " 1 " min = " 0 " oninput = "。Value = this。取值为> 5 ?5: Math.abs(this.value)"/>

这是有条件的。值> 5,只需更新5与您的最大限制。

解释:

如果我们的输入数大于我们的极限更新输入值this。Math.abs(this.value) 否则就达到最大限度,也就是5。

我以前遇到过这个问题,我使用html5数字类型和jQuery的组合解决了它。

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

脚本:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

我不知道这些活动是否有点过分,但它解决了我的问题。 JSfiddle

这很简单,用一些javascript你可以模拟一个maxlength,看看:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

你可以像这样把所有这些组合起来:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>

更新: 您可能还希望防止输入任何非数字字符,因为object。Length对于数字输入来说是一个空字符串,因此它的长度为0。因此maxLengthCheck函数将不起作用。

解决方案: 看这个或这个例子。

演示-查看完整版本的代码在这里: http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

更新2:下面是更新代码: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

更新3: 请注意,允许输入超过一个小数点可能会导致数值混乱。