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.

I strongly suspect there's something else at play. Are you using any libraries or frameworks with turn your markup into something different for mobile browsers, such as jQuery Mobile? — Matt Ball, Jul 03 '13 at 04:09
I would second what @MattBall said. Probably a script conflicting or throwing errors. Do you see any js errors thrown? — jedmao, Jul 03 '13 at 04:18
You can use http://mimo84.github.io/bootstrap-maxlength/ which looks like having a `validate` parameter for browsers non supporting the maxLength attribute, including mobiles. — Mimo, Jul 03 '13 at 04:52
I only have the regular jQuery library included. I even tested it out on w3schools page about maxlength. It doesn't work on my phone at least — mdurchholz, Jul 17 '13 at 14:38

score 9 · Accepted Answer · answered Jul 03 '13 at 04:16

9

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/

answered Jul 03 '13 at 04:16

jedmao

10,224
11
59
65

Is it possible to disable the key press after it reaches maximum 5 ? – Dinesh Kumar Jan 05 '15 at 07:30
@DineshKumar One of the other responses disables key presses after reaching the maximum. However, it's not recommended since the user will then be unable to press backspace. – mattsoave Dec 11 '16 at 22:26

score 4 · Answer 2 · answered Sep 28 '20 at 10:24

4

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

answered Sep 28 '20 at 10:24

Vajiheh Habibi

379
1
4
16

1

Sure, but you can't assume every user is going to have this disabled. You have to be able to account for all instances. – mdurchholz Sep 28 '20 at 14:48
1

@mdurchholz Of course, I just wanted friends to know why this happened, maybe it will help a better search to find the final answer,I also had this problem today, but I did not find a good answer to it – Vajiheh Habibi Sep 28 '20 at 17:34
@VajihehHabibi I didn't find the right fix for this using only javascript. But your comment show me the problem. Tks – Luiz Henrique Jun 09 '22 at 13:39

score 2 · Answer 3 · answered May 13 '17 at 17:41

2

var max = 1

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

answered May 13 '17 at 17:41

littleboots

111
1
4

2

While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Martin Tournoij May 13 '17 at 22:34

score 0 · Answer 4 · answered Dec 04 '16 at 12:55

I'd suggest something a bit more simple. The aboves didn't work for me unless there was a space added for the field to pick up on it... or if I hit submit right after, it still passed the information.

if($(".input") > 20){$(".input") = input.slice(0,20)};

doublejosh · Answer 5 · 2017-12-16T21:00:37.740

0

Universal jQuery way to enforce the stated maxlength of a form field. (I needed it for sessionStorage, localStorage, and param overrides.) Code optimized for readability.

$('input').on('change', function () {
  var max = $(this).attr('maxlength'),
      val = $(this).val(),
      trimmed;

  if (max && val) {
    trimmed = val.substr(0, max);
    $(this).val(trimmed);
  }
});

edited Dec 16 '17 at 21:00

answered Dec 13 '17 at 06:47

doublejosh

5,548
4
39
45

score 0 · Answer 6 · answered Aug 31 '22 at 05:45

0

This problem is because predictive text is enabled on your mobile keyboard so disable predictive text.

<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" name="name" maxlength="50">

answered Aug 31 '22 at 05:45

Mayur Parmar

224
1
8

This did not prevent my mobile keyboard from generating predictions. Seems like JS is the only solution. – Max Mar 13 '23 at 13:17

score -1 · Answer 7 · answered Jul 03 '13 at 04:29

-1

var maxLength = 10;
var field = $('#myinput');
field.keydown( function(e)
{
    if ( $(this).val().length >= maxLength ) e.preventDefault();
});

answered Jul 03 '13 at 04:29

scel.pi

703
6
9

1

Can't seem to hit backspace once the max length has been reached. – Trevor Oct 24 '13 at 16:59

Enforcing the maxlength attribute on mobile browsers

7 Answers7

Linked