CODEWITHSUNDEEP
javascriptjqueryhtmlinputmaxlength
mdurchholz
mdurchholz

Reputation: 523

Enforcing the maxlength attribute on mobile browsers

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.

Upvotes: 19

Views: 17557

Answers (7)

Mayur Parmar
Mayur Parmar

Reputation: 264

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">

Upvotes: 0

Vajiheh Habibi
Vajiheh Habibi

Reputation: 479

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

Upvotes: 3

doublejosh
doublejosh

Reputation: 5774

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

Upvotes: 0

littleboots
littleboots

Reputation: 111

var max = 1

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

Upvotes: 2

COMPUTER KICK
COMPUTER KICK

Reputation: 11

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

Upvotes: 0

scel.pi
scel.pi

Reputation: 703

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

Upvotes: -1

jedmao
jedmao

Reputation: 10502

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/

Upvotes: 9

Related Questions