对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?
当前回答
<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" />
其他回答
假设您希望允许的最大值为1000—可以是键入的,也可以是使用旋转器的。
你可以使用以下方法限制微调器值: Type ="number" min="0" max="1000"
并且用javascript限制键盘输入的内容: onkeyup =“如果(方法(this.value) > 1000){。值= 1000;返回错误;}”
<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">
梅考·莫拉的回答是一个好的开始。 然而,他的解决方案意味着当您输入第二个数字时,所有字段的编辑都会停止。因此,您不能更改值或删除任何字符。
下面的代码停在2,但允许继续编辑;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
这很简单,用一些javascript你可以模拟一个maxlength,看看:
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
正如其他人所说,min/max与maxlength不同,因为人们仍然可以输入一个比您想要的最大字符串长度更大的浮点数。为了真正模拟maxlength属性,你可以在紧要关头做这样的事情(这相当于maxlength="16"):
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
我发现你不能使用任何onkeydown, onkeypress或onkeyup事件的完整解决方案,包括移动浏览器。顺便说一下,onkeypress已弃用,不再出现在chrome/opera的android(见:UI事件 W3C工作草案,2016年8月4日)。
我只使用oninput事件找到了一个解决方案。 你可能需要做额外的数字检查,如负号/正号或小数和千个分隔符等,但作为一个开始,以下应该足够了:
函数checkMaxLength(事件){ //准备恢复之前的值 如果这一点。oldValue === undefined) { 这一点。oldValue = this.defaultValue; } 如果(this.value。长度> this.maxLength) { //设置回前一个值 这一点。value = oldVal; } 其他{ //存储之前的值。 这一点。oldValue = this.value; //对+/-或。/等进行额外检查 //同时考虑合并'maxlength' //使用'min'和'max'来防止错误提交。 } }
我还建议将maxlength与min和max结合起来,以防止如上所述的错误提交。