如何在 HTML5“input type=number”元素中设置最大长度？

Question

对于 <input type="number"> 元素， maxlength 不工作。我如何限制该数字元素的 maxlength ？

原文由 Prasad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

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

原文由 Cyclonecode 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以指定 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);
    }
}

原文由 Andy E 发布，翻译遵循 CC BY-SA 3.0 许可协议