HTML maxlength 属性不适用于 chrome 和 safari？答案

【问题标题】：HTML maxlength attribute not working on chrome and safari?HTML maxlength 属性不适用于 chrome 和 safari？
【发布时间】：2012-03-22 05:53:57
【问题描述】：

<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius">

这是我的 HTML，用 firebug（在 chrome 上）拍摄。

我可以在表单域中写入任意数量的字符 - 在 Chrome 和 Safari 中。

在 Firefox 或 IE10 上，限制没问题。

我在网上没有发现这个问题。

注意：type="number" - 不是文本。

以前有人见过这个问题吗？

【问题讨论】：

stackoverflow.com/questions/18510845/…

标签： html

【解决方案1】：

最大长度不适用于<input type="number" 我知道的最好方法是使用 oninput 事件来限制最大长度。请看下面的代码。

<input name="somename"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
        type = "number"
        maxlength = "6"
     />

【讨论】：

恕我直言，最好的解决方案
可以只使用 oninput="this.value=this.value.slice(0,this.maxLength)" 来完成。

【解决方案2】：

对type="number" 的输入使用 max 属性。它将指定您可以插入的最大可能数字

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

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

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

看到这个example

编辑

如果为了用户体验，您希望用户不能输入超过某个数字，请使用 Javascript/jQuery，如 example 中所示

【讨论】：

这并不强制所有浏览器的最大长度
在 chrome v 74 中这不起作用。浏览器会忽略最大值

【解决方案3】：

maxlength 属性不适用于 type="number" 的输入

来自关于 type="number" 的 W3 HTML5 规范

以下内容属性不得指定，也不得适用于元素：accept、alt、checked、dirname、formaction、 formnctype, formmethod, formnovalidate, formtarget, height, maxlength、multiple、pattern、size、src 和 width。

来源：http://dev.w3.org/html5/spec/Overview.html#number-state-type-number （在簿记详情下）

在 FF 和 IE 中，输入回退为文本输入，因此 maxlength 适用于输入。一旦 FF 和 IE 实现了 type="number"，他们也应该以不适用 maxlength 的方式实现它。

【讨论】：

不应该 min="10000000000" max="99999999999" 为 11 个字符工作？它不适用于我的，也不适用于 chrome 或 safari（移动）

【解决方案4】：

对于那些仍然无法让它工作的人......试试这个来启动更胖的数字键盘：

<input type="number" name="no1" maxlength="1" size="1" max="9" pattern="[0-9]*" />

还有js：

$('input[name="no1"]').keypress(function() {
    if (this.value.length >= 1) {
        return false;
    }
});

【讨论】：

keypress 事件在移动 chrome 浏览器上不起作用。或 PWA

【解决方案5】：

这是一个使用 type="number" 和 maxlength 的示例，适用于 Chrome、IE 等。希望对您有所帮助！

<!DOCTYPE html>
<html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

        </script>
        <script>
            function test(id, event) {
                var element = $("#" + id);
                var len = element.val().length + 1;
                var max = element.attr("maxlength");

                var cond = (46 < event.which && event.which < 58) || (46 < event.keyCode && event.keyCode < 58);

                if (!(cond && len <= max)) {
                    event.preventDefault();
                    return false;
                }
            }
        </script>
    </head>

    <body>
        <input id="test" size="3" type="number" maxlength="3" onkeypress="test(this.id, event)">
    </body>

</html>

【讨论】：

即使在 Chrome 和 Safari 中输入类型号，这段代码也能完美运行。谢谢！！这拯救了我的一天！
这可以防止在表单字段中使用退格，因此键码也应该列入白名单。也许还有“tab”和“enter”。

【解决方案6】：

说到 HTML 4.01，没有“数字”这样的类型。说到HTML 5如果http://www.w3schools.com/html5/html5_form_input_types.asp 正确，FF 和 IE 还不知道数字类型。

/edit：所以 FF 和 IE 可能会回退到 text，这就是 maxlength 起作用的原因。

【讨论】：

【解决方案7】：

我使用这个jQuery 代码解决了问题：

$('input[type="number"]').on('keypress', function (e) {
    var maxlength = $(this).prop('maxlength');
    if (maxlength !== -1) {  // Prevent execute statement for non-set maxlength prop inputs
        var length = $(this).val().trim().length;
        if (length + 1 > maxlength) e.preventDefault();
    }
});

为您想要的每个input[type="number"] 设置maxlength 属性，就像文本输入一样。

【讨论】：