如何限制HTML5“数字”元素中的可能输入？

2018-06-05 22:49:36

对于<input type="number">元素， maxlength不起作用。我怎样才能限制的maxlength为号元素？

并且您可以添加一个max属性，它将指定您可以插入的最大可能数字

<input type="number" max="999" />

如果同时添加max和min ，则可以指定允许值的范围：

<input type="number" min="1" max="999" />

以上内容仍然不会阻止用户手动输入超出指定范围的值。相反，他会显示一个弹出窗口，告诉他在提交表单时输入此范围内的值，如下图所示：

在这里输入图像描述

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

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

但是，这仅适用于微调控制按钮。虽然用户可能能够输入大于允许的max ，但表单不会提交。

截图来自Chrome 15

您可以在JavaScript中使用HTML5 oninput事件来限制字符数：

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

如果您正在寻找一种移动网络解决方案，希望用户看到数字键盘而不是全文键盘。使用type =“tel”。它将与maxlength一起使用，从而避免创建额外的javascript。

最大值和最小值仍然允许用户键入超过最大值和最小值的数字，这不是最优的。

链接地址: http://www.djcxy.com/p/18653.html