Home » Android » android – maxlength attribute of input in html does not work on HTC One M7

android – maxlength attribute of input in html does not work on HTC One M7

Posted by: admin June 15, 2020 Leave a comment

Questions:

I got a simple input field which has a maxlength=”2″ attribute. The code looks like this below:

<input id="txtLoginName" maxlength="2">

It works fine on most Android devices. However, on the HTC One M7, it does not work. On this device, it just allows me to enter as many characters as I want.

Any suggestion? I think it should be a device specific issue so far.

Thanks in advance.

How to&Answers:

Try this one:

var $input = $('input')
$input.keyup(function(e) {
    var max = 5;
    if ($input.val().length > max) {
        $input.val($input.val().substr(0, max));
    }
});

Answer:

What I found about this topic:

The issue is not specific to Android but is to Android keyboards. maxlength works on google keyboard.maxlength does not work on Samsung keyboard. => see https://github.com/ionic-team/ionic/issues/11578#issuecomment-323403990

and even more important – it’s not a bug, it’s a feature:

Answer:

I’ve noticed this issue on a couple of projects. I think certain versions of Android have bad support for maxlength.

My solution was to use a jQuery keydown function that checks the amount of characters and prevents anymore from being entered if the max has been hit.

$('#inputWithMaxLength').keydown(function (e) {

    var inputLength = jQuery(this).val().length;

    if(inputLength >= 10) {
        e.preventDefault();
        return false;
    }
}

I’m sure you could change this so that it searched for any input with attributes of maxlength and created a jQuery backup on the fly. I’m not sure if that would be rather slow though.

Answer:

To prevent this, you should use (Js-Jquery hybrid)

$("body").unbind("keyup").on("keyup","input[maxlength],textarea[maxlength]", function(event) {
    this.value=  this.value.substr(0, this.getAttribute("maxlength"));
    this.onkeyup && this.onkeyup();
});

The onkeyup is because, you might have inline onkeyup which should be called too after this code runs ( for example to update the char counter).