kdarty
8/30/2016 - 11:33 AM

While Input Type TEXT can easily be limited to input based on the Maxlength, Input Type NUMBER does not. To fix this shortcoming and keep th

While Input Type TEXT can easily be limited to input based on the Maxlength, Input Type NUMBER does not. To fix this shortcoming and keep the user-friendly experience of moving to a Numeric Keyboard on Mobile, trap the "KeyUp" Event and slice input text based on the given Maxlength of the field.

Maxlength-Numeric-Limiter.js
content_copyfile_download
// On Key Up Event Handler to ensure Numeric Inputs adhere to their Max Length
$('input[type=number]').on('keyup', function (event) {
    var maxlength = $(this).attr('maxlength');

    if (this.value.length > maxlength) {
        this.value = this.value.slice(0, maxlength);
    }
});