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!

Answer 1

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

Answer 2

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

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