Question

<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” - 不是文字。

之前有人看过这个问题吗？

Answer 1

对type="number"的输入使用max属性。它将指定您可以插入的最高编号

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

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

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

请参阅此example

修改

如果为了用户体验，您希望用户输入的数量不能超过一定数量，请使用Javascript / jQuery，如example

所示

Answer 2

maxlength属性不适用于type =“number”

的输入

关于type =“number”的W3 HTML5规范

不得指定以下内容属性，也不得指定适用于元素：accept，alt，checked，dirname，formaction， formenctype，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不适用的方式实现它。

Answer 3

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

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

Answer 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;
    }
});

Answer 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>

Answer 6

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

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

Answer 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();
    }
});

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

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

7 个答案: