对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?
当前回答
梅考·莫拉的回答是一个好的开始。 然而,他的解决方案意味着当您输入第二个数字时,所有字段的编辑都会停止。因此,您不能更改值或删除任何字符。
下面的代码停在2,但允许继续编辑;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
其他回答
HTML输入
<input class="minutesInput" type="number" min="10" max="120" value="" />
jQuery
$(".minutesInput").on('keyup keypress blur change', function(e) {
if($(this).val() > 120){
$(this).val('120');
return false;
}
});
如果您正在寻找一种移动Web解决方案,希望用户看到数字键盘而不是全文键盘。使用类型=“电话”。它将与maxlength一起工作,这将节省您创建额外的javascript。
Max和Min仍然允许用户输入超过Max和Min的数字,这不是最佳的。
你可以像这样把所有这些组合起来:
<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: 请注意,允许输入超过一个小数点可能会导致数值混乱。
您可以添加一个max属性,该属性将指定您可以插入的最大数字
<input type="number" max="999" />
如果你同时添加Max和min值,你可以指定允许值的范围:
<input type="number" min="1" max="999" />
以上仍然不会阻止用户手动输入指定范围之外的值。相反,他会看到一个弹出窗口,告诉他在提交表单时输入一个范围内的值,如下面的截图所示:
你可以将它指定为文本,但要添加只匹配数字的pettern:
<input type="text" pattern="\d*" maxlength="2">
它非常完美,而且在移动设备上(在iOS 8和Android上进行了测试),数字键盘也会弹出。