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:

Answer 1

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