why is 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 http://stackoverflow.com/questions/8354975/how-to-add-maxlength-for-html5-input-type-number-element — Marwelln, Feb 20 '12 at 12:41

score 35 · Accepted Answer · edited Dec 25 '13 at 00:51

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 '13 at 00:51

Camilo Martin

37,236
20
111
154

answered Feb 21 '12 at 06:56

Jules

3,105
2
27
33

7

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). – Seeven Sep 16 '14 at 10:24
4

This is nice in iOS but on android the keyboard still shows up as text, not numbers. – lizlux Apr 09 '15 at 23:39
3

@lizlux add the attribute `inputmode=numeric` – OdraEncoded Aug 19 '15 at 15:57
12

the spec is idiotic, the fact that we need to change from type="number" to type="text" with pattern and javascript is ridiculous – Nuno Furtado Jul 08 '16 at 10:40
Remove the pattern attribute if you are going to use the javascript code. – Isaac Pak Jul 20 '16 at 17:49
1

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. – apereira Sep 18 '18 at 14:56
I don't get it.... if the pattern works, why would you need JavaScript? – JoelFan May 30 '20 at 00:56

score 26 · Answer 2 · answered Nov 24 '16 at 16:31

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 '16 at 16:31

Viktor Karpyuk

725
7
4

Thanks. its a nice solution. – Shakoor Hussain Attari Mar 21 '22 at 12:29

score 6 · Answer 3 · answered Dec 27 '17 at 13:17

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 '17 at 13:17

Surya R Praveen

3,393
1
24
25

score 5 · Answer 4 · answered Feb 21 '12 at 05:28

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 '12 at 05:28

Mohan Kumar

6,008
6
28
36

Thank you :) I'm using Safari 1.5.2. I realized it like beneath: – Jules Feb 21 '12 at 06:58

score 1 · Answer 5 · answered Mar 16 '16 at 21:29

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

score 1 · Answer 6 · answered Mar 27 '17 at 11:58

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.

score -1 · Answer 7 · answered May 12 '17 at 02:34

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

Himanshu Raj · Answer 8 · 2020-05-06T04:39:34.223

-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 06 '20 at 04:39

answered May 06 '20 at 04:19

Himanshu Raj

41
1
6

Chrome is ignoring the regexp, don't know about other browsers. – DeZeA Apr 15 '21 at 08:31

why is not working in Safari?

8 Answers8

Linked