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


当前回答

你可以将它指定为文本,但要添加只匹配数字的pettern:

<input type="text" pattern="\d*" maxlength="2">

它非常完美,而且在移动设备上(在iOS 8和Android上进行了测试),数字键盘也会弹出。

其他回答

设置数字输入的maxlength的一个简单方法是:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

啊。就像有人在实施过程中半途而废,以为没人会注意到。

不管出于什么原因,上面的答案没有使用min和max属性。这个jQuery完成它:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

如果你是那种“jQuery-is-the-devil”类型,它也可能作为一个命名函数“oninput”使用jQuery。

或者如果你的最大值是99,最小值是0,你可以把它加到输入元素中(你的值会被你的最大值重写)。

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

然后(如果你想),你可以检查输入的是否真的数字

//对于Angular,我添加了如下代码片段。 < div ng-app = " " > < >形式 输入数字:<input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0"> > < /形式 <h1>输入:{{number}}</h1> < / div >

如果你使用"onkeypress"事件,那么你在开发(单元测试)时将不会受到任何用户限制。如果你有要求,不允许用户进入特定的限制后,看看这段代码,并尝试一次。

<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

或者如果你想什么都不能输入

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />