How to restrict number of characters that can be entered in HTML5 number input field on iPhone

Question

It seems that neither of the "maxlength", "min" or "max" HTML attributes have the desired effect on iPhone for the following markup:

 <input type="number" maxlength="2" min="0" max="99"/>

Instead of limiting the number of digits or the value of the number entered, the number is just left as it was typed in on iPhone 4. This markup works on most other phones we tested.

What gives?

Any workarounds?

If it is important to the solution, we use jQuery mobile.

Thanks!

score 51 · Accepted Answer · edited Nov 08 '22 at 09:45

51

Example

JS

function limit(element)
{
    var max_chars = 2;
         
    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
}

HTML

<input type="number" onkeydown="limit(this);" onkeyup="limit(this);">

If you are using jQuery you can tidy up the JavaScript a little:

JS

var max_chars = 2;
    
$('#input').keydown( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});
    
$('#input').keyup( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});

HTML

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

edited Nov 08 '22 at 09:45

ejuhjav

2,660
2
21
32

answered May 18 '12 at 16:44

will

944
9
18

Hi! This method is working fine, if I restrict user up to 1/2/3 characters, but as soon as I go to the limit of 4 or above, the solution breaks. I guess the problem is because of addition of ',' in the number field, but not sure. Can you please check this solution for 4 or more characters. – Anshul Oct 23 '12 at 07:33
Sadly, I ended up relying on javascript/jQuery for this. I couldn't use type="range" because that has a different semantic. – Mr. Developerdude Jan 22 '13 at 13:31
Not on keydown : else no copy/paste – Denis Chenu Oct 29 '14 at 08:17
4

Use `substring()` instead of `substr()`, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr. – Alexander Kim Jan 14 '19 at 15:54

Behnam · Answer 2 · 2020-04-06T11:32:07.073

6

you can use this code:

<input type="number" onkeypress="limitKeypress(event,this.value,2)"/>

and js code:

function limitKeypress(event, value, maxLength) {
    if (value != undefined && value.toString().length >= maxLength) {
        event.preventDefault();
    }
}

edited Apr 06 '20 at 11:32

answered Apr 30 '16 at 07:48

Behnam

6,244
1
39
36

Thanks, Buddy @Behnam Btw Why we need maxlength="2" min="0" max="99" here ...?? With out them it Works Fine i guess :) – RAJESH KUMAR ARUMUGAM Jun 20 '17 at 12:38
maxlength attr do not work in input with type="number" – Behnam Jun 24 '17 at 11:25

score 3 · Answer 3 · answered Aug 18 '14 at 22:41

3

Another option with jQuery, but onkeypress event... ;)

$("input[type=number]").on('keypress',function(e) { 
    var $that = $(this),
    maxlength = $that.attr('maxlength')
    if($.isNumeric(maxlength)){
        if($that.val().length == maxlength) { e.preventDefault(); return; }

        $that.val($that.val().substr(0, maxlength));
    };
});

answered Aug 18 '14 at 22:41

Tripex

41
2

This should be the accepted answer! – Jan 02 '22 at 11:57

score 2 · Answer 4 · edited May 23 '17 at 12:32

2

Check this out, it works for me;

Is there a minlength validation attribute in HTML5?

edited May 23 '17 at 12:32

Community

1
1

answered Nov 26 '13 at 06:04

user3035081

23
5

pattern=".{4,4}" : Great – Denis Chenu Oct 29 '14 at 08:14

score 2 · Answer 5 · edited Sep 01 '15 at 00:57

2

According to MDN, maxlength is not used for numbers. Have you tried just:

<input type="number" min="0" max="99" />

OR

<input type="range" min="0" max="99" />

edited Sep 01 '15 at 00:57

Dan Dascalescu

143,271
52
317
404

answered Mar 24 '12 at 03:58

Andrew Briggs

1,329
12
26

6

late to the game but how did this get 4 upvotes? deffo doesn't work – The Walrus Feb 19 '18 at 16:11
@TheWalrus but it does. – Jan 02 '22 at 11:53

score 1 · Answer 6 · edited May 23 '17 at 10:31

1

as Andrew said you need to change the type to range, beside that you are going to have problems with IE and FF and probably old ipad browser because that's from HTML 5, and it's a "Kind New". Take a look to this person who tried the range with JS, Specify range of numbers to input in number field using javascript

edited May 23 '17 at 10:31

Community

1
1

answered Apr 17 '12 at 16:03

jcho360

3,724
1
15
24

score 1 · Answer 7 · answered May 12 '12 at 10:13

1

You can use JavaScript to check how many characters are in the box and if there are too many, remove one: http://www.webcodingtech.com/javascript/limit-input-text.php

answered May 12 '12 at 10:13

ToshNeox

117
1
14

score 1 · Answer 8 · answered Sep 23 '13 at 06:58

Here a more optimized jQuery version that caches the selectors. It also uses the maxlength attribute that is not supported by input type number.

// limits the input based on the maxlength attribute, this is by default no supported by input type number
$("input[type=number]").on('keydown keyup',function(){ 
    var $that = $(this),
    maxlength = $that.attr('maxlength')
    if($.isNumeric(maxlength)){
        $that.val($that.val().substr(0, maxlength));
    };
});

Reza · Answer 9 · 2013-08-16T18:46:21.017

I know this question is one year old, but I don't prefer the selected answer. Because the way it works is that it shows the character that is typed and then removes it.

In contrast I will propose another way which is similar to Will's, it is just better in the way that it prevents the character from being shown. Also I've added an else if block to check if the character is a number and then it is a good function to validate the number fields.

HTML

<input type="number" onkeydown="limit(this);">

JS

function limit(element)
{
    var max_chars = 2;
    if (arguments[1].char !== "\b" && arguments[1].key !== "Left" && arguments[1].key !== "Right") {
        if (element.value.length >= max_chars) {
            return false;
        } else if (isNaN(arguments[1].char)) {
            return false;
        }
    }
}

Daniel Avellaneda · Answer 10 · 2017-08-15T15:24:50.973

This is Tripex answer optimized for allowing delete key, works when typing and on paste.

$(document).on("keyup", "#your_element", function(e) {
    var $that = $(this),
    maxlength = $that.attr('maxlength');
    if ($.isNumeric(maxlength)){
        if($that.val().length === maxlength) {
            e.preventDefault();
            // If keyCode is not delete key 
            if (e.keyCode !== 64) {
                return;
            }
        }
        $that.val($that.val().substr(0, maxlength));
    }
});

score 0 · Answer 11 · answered Jun 03 '21 at 16:05

My solution using jQuery:

JS

function maxlength(event)
{
    const ele = event.target;
    const maxlength = ele.maxLength;
    const value = ele.value;
    if (event.type == 'keypress')
    {
        if (value.length >= maxlength)
        {
            event.preventDefault();
        }
    }
    else if (event.type == 'keyup')
    {
        if (value.length > maxlength)
        {
            ele.value = value.substring(0, maxlength);
        }
    }
}

$('input[type=number][maxlength]').on('keypress keyup', maxlength);

HTML

<input type="number" maxlength="2">

score 0 · Answer 12 · answered Jun 08 '23 at 00:40

I use input event listener

<input type="text" 
    id="storeName"
    name="store_name" 
    class="store_name"
    placeholder="store name" 
    x-moz-errormessage="This field should not be left blank." 
    maxlength="500" required>   
<span id="storeNameCounter" class="store_name_counter">0/50</span>  

var storeName = document.getElementById('storeName')
var storeNameCounter = document.getElementById('storeNameCounter')       
    storeName.addEventListener('input', (event) => {
        var max_chars = 50         
        if(event.target.value.length > max_chars) {
        event.target.value = event.target.value.substr(0, max_chars)
        }
        storeNameCounter.innerHTML = `${event.target.value.length}/50`       
    })

How to restrict number of characters that can be entered in HTML5 number input field on iPhone

12 Answers12

Linked