Enforcing the maxlength attribute on mobile browsers

Question

I have an a text input with a maximum length:

<input type="text" name="name" maxlength="50">

This has been working fine on all the desktop browsers I've tried, but the maximum length does not seem to be enforced on mobile browsers.

Is there any way to get mobile browsers to enforce maxlength? I am open to using JavaScript and/or jQuery in the solution.

Answer 1

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

jsFiddle here: http://jsfiddle.net/fttk2/1/

Answer 2

This problem is because predictive text is enabled on your keyboard, disable it and try again

Answer 3

var max = 1

input.addEventListener('keyup', function (event) {
    event.target.value = event.target.value.substring(0, max)
})