why is <input type="number" maxlength="3"> not working in Safari?

Question

I like to have an input with maximum 3 characters. In Firefox everything works fine I can only write 3 numbers inside the input - but in safari you can write a lot of numbers inside.

You can test it in both browsers with this: http://flowplayer.org/tools/demos/validator/custom-validators.htm

For now I realized it with a validate plugin - but just for interest I like to know why isn’t this working?

EDIT:

with this it's working

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

answer: How can I prevent letters inside a text element?

What you can use is attribute max and min. See stackoverflow.com/questions/8354975/… — Marwelln
– Marwelln, Commented Feb 20, 2012 at 12:41

Camilo Martin · Accepted Answer · 2013-12-25 00:51:05Z

35

I've accomplished it with:

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

and then in JavaScript I prevented the letters:

$("#myField").keyup(function() {
    $("#myField").val(this.value.match(/[0-9]*/));
});

edited Dec 25, 2013 at 0:51

Camilo Martin

38.1k22 gold badges121 silver badges156 bronze badges

answered Feb 21, 2012 at 6:56

Jules

3,1552 gold badges30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Seeven Over a year ago

I think you can use [0-9]{3} instead of [0-9][0-9][0-9] in your pattern (I know it works in Chrome at least).

lizlux Over a year ago

This is nice in iOS but on android the keyboard still shows up as text, not numbers.

OdraEncoded Over a year ago

@lizlux add the attribute inputmode=numeric

Nuno Furtado Over a year ago

the spec is idiotic, the fact that we need to change from type="number" to type="text" with pattern and javascript is ridiculous

apereira Over a year ago

Just as a comment, by using type="text" you loose the ability of displaying the keypad on mobile devices, just a thing to keep in mind if your app is going mobile.

|

Viktor Karpyuk · Accepted Answer · 2016-11-24 16:31:45Z

26

You may try to user type="text" and oninput as below. This will let the numbers only.

<input type="text" maxlength="3" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

answered Nov 24, 2016 at 16:31

Viktor Karpyuk

7357 silver badges4 bronze badges

Comments

Surya R Praveen · Accepted Answer · 2017-12-27 13:17:29Z

6

Using onKeyDown length can be restricted

<input type="number" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">

Happy Coding :)

answered Dec 27, 2017 at 13:17

Surya R Praveen

3,7551 gold badge29 silver badges28 bronze badges

Comments

Mohan Kumar · Accepted Answer · 2012-02-21 05:28:18Z

5

Basically Max and Min properties are not supported in Safari browser yet. I can see no flaw in the syntax. Are u using the Safari version 1.3+? or below that? Because maxlength property is supported from safari 1.3+.

answered Feb 21, 2012 at 5:28

Mohan Kumar

6,0766 gold badges31 silver badges39 bronze badges

1 Comment

Jules Over a year ago

Thank you :) I'm using Safari 1.5.2. I realized it like beneath:

Travis Peterson · Accepted Answer · 2016-03-16 21:29:01Z

1

I used something very similar to @Jules answer except his won't allow the use of keys like shift+home. Since we're validating numbers I just used isNaN in the keyup function.

$("#myField").keyup(function() {
    var e = $("#myField");
    if(isNaN(e.val())){
        e.val(e.val().match(/[0-9]*/));
    }
});

With...

<input id="#myField" inputmode="numeric" maxlength="3" pattern="([0-9]{3})" type="text" />

answered Mar 16, 2016 at 21:29

Travis Peterson

4204 silver badges16 bronze badges

Comments

Subhabrata Banerjee · Accepted Answer · 2017-03-27 11:58:47Z

1

Here is a more simple solution. For me it worked

<input type="number" id="cvv">


$("#cvv").on("keypress", function(evt) {
  var keycode = evt.charCode || evt.keyCode;
  if (keycode == 46 || this.value.length==3) {
    return false;
  }
});

the JS block will prevent the "."(dot) so one cant enter float. We are keeping the input type as number so it will be only number as input. If the value length is 3 then it will return false, so input length also restricted.

answered Mar 27, 2017 at 11:58

Subhabrata Banerjee

5511 gold badge4 silver badges19 bronze badges

Comments

BeardedSalami · Accepted Answer · 2023-11-08 17:46:30Z

0

This thing worked for me... So basically Safari and Firefox still lets you introduce invalid characters and removes the whole thing on submit.

<input
    onInput={(event) => {
        if(!event.target.validity.valid) event.target.value = 
    this.state.value
    }}
/>

edited Nov 8, 2023 at 17:46

answered Nov 8, 2023 at 17:45

BeardedSalami

11 bronze badge

Comments

jwang · Accepted Answer · 2017-05-12 02:34:01Z

-1

https://jsfiddle.net/zxqy609v/8/

function fixMaxlength(inputNumber) {
  var maxlength = $(inputNumber).attr("maxlength");
    $(inputNumber).keyup(function (evt) {
    this.value = this.value.substring(0, maxlength);
    this.value = this.value.replace(/\D/g, '');
  });
}

answered May 12, 2017 at 2:34

jwang

1

Comments

Himanshu Raj · Accepted Answer · 2020-05-06 04:39:34Z

-2

You can not use maxlength and minlength function with input type=”number”

Instead one can use regexp to solve this problem
(?=.*[0-9]) - must contain only digit

{10,10} - min length and max length must be 10. You can change these values

<input type="number" pattern="(?=.*[0-9]).{10,10}" />

Use

pattern="(?=.*[0-9]).{10,10}"

edited May 6, 2020 at 4:39

answered May 6, 2020 at 4:19

Himanshu Raj

571 gold badge1 silver badge7 bronze badges

1 Comment

DeZeA Over a year ago

Chrome is ignoring the regexp, don't know about other browsers.

Collectives™ on Stack Overflow

why is <input type="number" maxlength="3"> not working in Safari?

9 Answers 9

7 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

7 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related