Limit of input characters

Question

I want to assemble a jQuery that applies a limit of 255 characters within the input.

My idea and do something like that:

$(".loading").on('input', function () {
  // aqui eu tenho que fazer o bloqueio
});

Answer 1

There are many ways to do this, as @Jessika commented:

<input type="text" class="loading" maxlength="255">

If you want to do the same, using jquery

function limitaCampo(campo, tamanho){
    $(campo).attr('maxlength',tamanho);
}

In case I want to do it the way you did: just change 'input' for 'keydown':

$(".loading").on('keydown', function (e) {
   if($(this).val().length >= 255){
      return false;
   }
});

Follow a 2-character limit snippet:

*added e.keyCode != 8 e 9 p/ allow click on Backspace and in the TAB

$(".loading").on('keydown', function(e) {
  if ($(this).val().length >= 2 && e.keyCode != 8 && e.keyCode != 9) {
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="loading">

Answer 2

I would like to suggest some modifications to what has already been proposed:

• First keydown works well, but there is a limitation, but if you use it you will have to combine onpaste and oninput (or ondrop maybe, if dragging something) too.

• Second, the event .on jQuery may be better applied if used in a "context", i.e. $(seletor).on(function()) wear this $(document).on(seletor, function()), because in this way jQuery detects better the modifications in DOM for example pages in Ajax

In general I recommend to exchange for onchange (propertychange for older versions of IE) and remove what is added later:

(function () {

    var limite = 10;
    
    function limitaInput(input) {
        if (input.value.length > limite) {
            input.value = input.value.substr(0, limite);
        }
    }
    
    $(document).on("propertychange change keyup", ".loading", function () {
        if (this.timerLimitInput) {
           clearTimeout(this.timer);
        }
    
        this.timerLimitInput = setTimeout(limitaInput, 10, this);//Timeout para evitar conflitos
    });

})();

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<input class="loading">

In this way any manipulation in the <input> will be detected

Answer 3

You can use the event keydown instead of input and use an attribute data-* to set the limit (since you said in the comments that you cannot "trust" the attribute maxlength.

The implementation is very naive, but the idea is this.

$(".loading").on('keydown', function (evt) {
  var qtd = $(this).val().length;
  var limite = $(this).data('limite') || 255;

  if(qtd > limite && evt.keyCode != 8)
    return false;
  
  console.log(qtd, limite);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="loading" data-limite="10"></textarea>
<textarea class="loading"></textarea>