Maxlength Of Input Tag With Type=text Using Html5 In Android Webview Not Working

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

Solution 1:

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

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

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

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