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


当前回答

简单的解决方法,

输入滚动事件 通过键盘复制粘贴 通过鼠标复制粘贴 输入类型等情况 <输入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。

其他回答

您可以指定min和max属性,这将只允许在特定范围内输入。

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

然而,这只适用于旋转控制按钮。尽管用户可以输入大于允许的最大值的数字,但表单将不会提交。

截图来自Chrome 15

你可以在JavaScript中使用HTML5的oninput事件来限制字符的数量:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

我以前遇到过这个问题,我使用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

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

我使用一个简单的解决方案的所有输入(与jQuery):

$(document).on('input', ':input[type="number"][maxlength]', function () {
    if (this.value.length > this.maxLength) {
        this.value = this.value.slice(0, this.maxLength); 
    }
});

代码选择maxlength定义的所有输入类型="number"元素。

如果您正在寻找一种移动Web解决方案,希望用户看到数字键盘而不是全文键盘。使用类型=“电话”。它将与maxlength一起工作,这将节省您创建额外的javascript。

Max和Min仍然允许用户输入超过Max和Min的数字,这不是最佳的。