maxlength of input tag with type=text using html5 in android webview not working

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.

f

Answer 1

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

Answer 2

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 3

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