发表新帖
发表新帖

HTML maxlength attribute not working on chrome and safari?

前端 未结
关注
7 1674
借酒劲吻你
借酒劲吻你 2020-12-15 15:06
相关标签:
7条回答
  • 盖世英雄少女心
    2020-12-15 15:42

    Speaking of HTML 4.01 there is no such type as "number". Speaking of HTML 5 FF and IE do not yet know the number type if http://www.w3schools.com/html5/html5_form_input_types.asp is correct.

    /edit: So FF and IE will probably fallback to text and this is why maxlength will work.

    0 讨论(0)
  • 你的背包
    2020-12-15 15:46

    Here is an example using type="number" and maxlength, that works with Chrome, IE and others. Hope it helps!

    <!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>
    0 讨论(0)
  • 说谎
    2020-12-15 15:47

    Use the max attribute for inputs of type="number". It will specify the highest possible number that you may insert

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

    if you add both a max and a min value you can specify the range of allowed values:

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

    See this example

    EDIT

    If, for user experience, you would prefer the user not to be able to enter more than a certain number, use Javascript/jQuery, as seen in this example

    0 讨论(0)
  • 半阙折子戏
    2020-12-15 15:47

    For those who still can't get it to work... Try this to fire up the fatter number pads:

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

    And the js:

    $('input[name="no1"]').keypress(function() {
    if (this.value.length >= 1) {
        return false;
    }
});
    0 讨论(0)
  • 野趣味
    2020-12-15 15:49

    Max length will not work with <input type="number" the best way i know is to use oninput event to limit the maxlength. Please see the below code.

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

    0 讨论(0)
  • 时光说笑
    2020-12-15 15:49

    The maxlength attribute does not apply to an input of type="number"

    From W3 HTML5 spec concerning type="number"

    The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, multiple, pattern, size, src, and width.

    Source: http://dev.w3.org/html5/spec/Overview.html#number-state-type-number (under Bookkeeping details)

    In FF and IE, the input is falling back to be a text input and therefore, maxlength applies to the input. Once FF and IE implement type="number", they should also implement it in a way where maxlength does not apply.

    0 讨论(0)
 看不清?
提交回复
热议问题