Как запретить пользователю вводить текст в текстовую область после достижения максимального количества символов

Событие keyup срабатывает после того, как произошло поведение по умолчанию (заполнение текстовой области).

Лучше использовать событие keypress и фильтровать непечатаемые символы.

Демонстрация: http://jsfiddle.net/3uhNP/1/ ( с максимальной длиной 4)

jQuery(document).ready(function($) {
    var max = 400;
    $('textarea.max').keypress(function(e) {
        if (e.which < 0x20) {
            // e.which < 0x20, then it's not a printable character
            // e.which === 0 - Not a character
            return;     // Do nothing
        }
        if (this.value.length == max) {
            e.preventDefault();
        } else if (this.value.length > max) {
            // Maximum exceeded
            this.value = this.value.substring(0, max);
        }
    });
}); //end if ready(fn)

<textarea maxlength="400"> </textarea>

Используйте приведенный выше код, чтобы ограничить количество символов, вставляемых в текстовую область, если вы хотите отключить саму текстовую область (т. е. не сможете редактировать ее впоследствии), вы можете использовать javascript/jquery, чтобы отключить ее.

Будь проще

var max = 50;
$("#textarea").keyup(function(e){
$("#count").text("Characters left: " + (max - $(this).val().length));
});

и добавьте это в свой html

<textarea id="textarea" maxlength="50"></textarea>
<div id="count"></div>

просмотреть пример

Просто напишите этот код в файле Javascript. Но нужно указать атрибут «maxlength» с текстовой областью. Это будет работать для всей текстовой области страницы.

$('textarea').bind("change keyup input",function() {

        var limitNum=$(this).attr("maxlength");

        if ($(this).val().length > limitNum) {
            $(this).val($(this).val().substring(0, limitNum));
        }

    });

Вы можете напрямую передать maxlength textarea, чтобы отключить себя. Но вы хотите отобразить соответствующее сообщение, затем используйте событие keyup для поведения по умолчанию и textarea length для вычисления символа и отображения подходящего сообщения.

HTML

<div id="count"></div>
<textarea class="max"  maxlength="250" id="tarea"></textarea>
<div id="msg"></div>

jQuery

$(function(){
    var max = parseInt($("#tarea").attr("maxlength"));
  $("#count").text("Characters left: " + max);
    $("#tarea").keyup(function(e){
        $("#count").text("Characters left: " + (max - $(this).val().length));
    if($(this).val().length==max)
        $("#msg").text("Limit Reached....");
        else
        $("#msg").text("");
    });
});

Демонстрационная скрипта

Вы можете оставить свое мероприятие как есть и просто использовать эту библиотеку

Примеры

// applying a click event to one element

Touche(document.querySelector('#myButton')).on('click', handleClick);

// or to multiple at once

Touche(document.querySelectorAll('.myButtons')).on('click', handleClicks);

// or with jQuery

$('.myButtons').on('click', handleClicks);

Для тех, кто уже использует ES2015 в своих браузерах, вот реализация, использующая некоторые из приведенных выше ответов:

class InputCharacterCount {
  constructor(element, min, max) {
    this.element = element;
    this.min = min;
    this.max = max;
    this.appendCharacterCount();
  }

  appendCharacterCount(){
    let charCount = `<small class="char-counter help-block"></small>`;
    this.element.closest('.form-group').append(charCount);
  }

  count(event){
    this.element.attr('maxlength', this.max); // Add maxlenght attr to input element

    let value = this.element.val();
    this.element
      .closest('.form-group')
      .find('.char-counter')
      .html(value.length+'/'+this.max); // Add a character count on keyup/keypress

    if (value.length < this.min || value.length > this.max) { // color text on min/max changes
      this.element.addClass('text-danger');
    } else {
      this.element.removeClass('text-danger');
    }
  }
}

Применение:

let comment = $('[name="collection-state-comment"]');
let counter = new InputCharacterCount(comment, 21, 140);
$(comment).keyup(function(event){
  counter.count(event);
});

Вы можете использовать этот плагин вместо того, чтобы пытаться написать свой собственный. Я обнаружил, что это работает очень хорошо.