15

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.

EJoshuaS - Stand with Ukraine
  • 11,977
  • 56
  • 49
  • 78
Long Dao
  • 1,341
  • 4
  • 15
  • 33

4 Answers4

9

Try this one:

jQuery:

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

Vanilla js:

const input = document.getElementById('address1');
const max = Number(input.getAttribute('maxlength'));

input.addEventListener('keyup', function() {
    if (this.value.length > max) {
      this.value = this.value.substr(0, max)
    }
});
Richard
  • 2,396
  • 23
  • 23
Kevin Sebastian Fernandez
  • 131
  • 2
  • 8
  • 1
    so easy and so usefull! In Android all the other suggestion with 'return false' on value > maxlength doesn't worked, this works perfectly! Thanks! – Simona Adriani Feb 04 '16 at 11:38
  • Same here. The other answer did not work on Android Cordova (although it words in desktop chrome browser) . But this one works fine even with autocomplete, autocorrect enabled. – Hawk Aug 04 '16 at 07:50
  • This does not work on my Android Cordova project, is there any workaround? – S_S Mar 23 '17 at 16:43
8

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:

Miro Grenda
  • 106
  • 1
  • 6
2

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.

Adam Hughes
  • 2,197
  • 20
  • 31
  • Yeah I know that jQuery can help with this issue. However, I faced with another issue: for instance, I enter a character, let say "f", the prediction will suggest some words like friend, fire, film, etc. If I select a suggested word, the textfield will allow more than 2 characters and from now, I am still able to enter some character. – Long Dao Jul 23 '14 at 03:30
  • You could give the input or form the attribute autocomplete="off" since it's a mobile browser and probably running html5 – Adam Hughes Jul 23 '14 at 08:45
  • I already tried it but none of the autocomplete or autocapitalize etc. works with prediction of Android. – Long Dao Jul 24 '14 at 03:19
  • Have you tried all of these? autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" – Adam Hughes Jul 24 '14 at 08:12
  • yes I already did. Sadly, none of them works. I think there is no way to catch the event when a prediction word is pressed. Seems like it is an unsolvable issue atm. – Long Dao Jul 24 '14 at 22:59
0

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).

Miguel
  • 3,349
  • 2
  • 32
  • 28