maxlength of input tag with type=text using html5

Question

i am able to enter more than specified maxlength of input tag with type=text using html5 in android webview. when lost focus/ blur, value will be trimmed to maxlength.

for example

<input type="text" maxlength="5" id="hahaha">

 value entered = abcdefghij
 on blur/lostfocus value displayed = abcde.

is there anyway that restricts the user from entering more characters than maxlength rather than trimming content after user entered the content . In IOS it is working fine.

Answer 1

A bit late to the party, but as neliojrr mentioned you can correct this using javascript/jquery. However, I would be very tempted to make this much more generic:

$('input[maxlength]').on('keydown', function(event) {
    var $this = $(this);
    if ($this.val().length > parseInt($this.attr('maxlength'), 10)) {
        event.preventDefault();
    }
});

Answer 2

This problem probably is a bug in Android 4.1 version as you can see here 35264. You can solve that with some Javascript:

<input type="text" maxlength="3" id="hahaha" onkeypress="if(this.value.length >= this.getAttribute('maxlength') return false;" />

or JQuery:

$(function() {
    max_length = Number($("#hahaha").attr("maxlength"));
    $("#hahaha").attr("onkeypress", "if(this.value.length >= max_length) return false;");
});

Answer 3

Thanks @paddybasi it worked for me. Just one small correction. keydown event doesn't seem to be working in android. So we need to change the event to "textInput".

$('input[maxlength],textarea[maxlength]').on('textInput', function (event) {
        var $this = $(this);
        if ($this.val().length >= parseInt($this.attr('maxlength'), 10)) {
            event.preventDefault();
        }
    });