CODEWITHSUNDEEP
html
Tool
Tool

Reputation: 12488

HTML maxlength attribute not working on chrome and safari?

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

This is my HTML, taken with firebug (on chrome).

I am allowed to write as much as characters as I want in the form field - in Chrome and Safari.

When on Firefox or IE10, the limit is fine.

I haven't found this issue around on the net.

Note: type="number" - not text.

Anyone saw this issue before?

Upvotes: 62

Views: 136056

Answers (9)

Adioz Daniel
Adioz Daniel

Reputation: 516

for guys who are using React and have landed here:

  <input name="maxNumber"
            onInput= {(event)=> event.target.value.length > 1 ? 
                                event.target.value = 
                                event.target.value.slice(0, 1)
                                : 
                                event.target.value
                        }
            type = "number"
    />

In this case, 1 is the maximum length of values. You can put any and change the ones.

Upvotes: 0

Katherine Brough
Katherine Brough

Reputation: 11

for react this works for me if anyone stumbles on here with using react :)

<input type="number" name="expiry" placeholder="Expiry" onChange= 
{this.handleInputChange} onFocus={this.handleInputFocus} onInput={(event)=>event.target.value=event.target.value.slice(0,event.target.maxLength)} 
maxLength="4" />

Upvotes: 1

Arash Younesi
Arash Younesi

Reputation: 1750

I solved problem using this jQuery codes:

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

Set maxlength attribute for every input[type="number"] that you want, just like text inputs.

Upvotes: 1

Avinash Jain
Avinash Jain

Reputation: 7616

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"
     />

Upvotes: 82

user3325657
user3325657

Reputation: 25

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>

Upvotes: 3

zen.c
zen.c

Reputation: 688

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

Upvotes: 5

keithwyland
keithwyland

Reputation: 2998

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.

Upvotes: 23

jacktheripper
jacktheripper

Reputation: 14219

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

Upvotes: 50

m02ph3u5
m02ph3u5

Reputation: 3161

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.

Upvotes: 2

Related Questions