Обратный отсчет доступных мест в текстовой области с помощью jquery или другого?

Очень просто в jQuery:

<textarea id="myTextarea"></textarea>
<p id="counter"></p>

<script type="text/javascript">
$('#myTextarea').keyup(function () {
    var left = 200 - $(this).val().length;
    if (left < 0) {
        left = 0;
    }
    $('#counter').text('Characters left: ' + left);
});
</script>

Замените 200 любым вашим пределом.

Обратите внимание, что это не ограничивает фактический ввод текста, он просто ведет обратный отсчет. Вам нужно проверить длину ввода на стороне сервера, это просто визуальный помощник.

Кроме того, я не думаю, что вам даже следует пытаться ограничивать длину ввода, запрещая любой ввод, когда предел достигнут. Это боль в тылу с точки зрения удобства использования, и на нее нельзя полагаться в любом случае. Простой обратный отсчет и проверка на стороне сервера - лучший вариант ИМХО.

Иногда вам нужно иметь более одной текстовой области, и вы хотите, чтобы они обрабатывались по отдельности, без необходимости кодирования для каждой. Этот код динамически добавляет оставшиеся символы к любому, имеющему атрибут maxLength...

<script type="text/javascript">
$(document).ready(function(){
    $('textarea[maxLength]').each(function(){
        var tId=$(this).attr("id");
        $(this).after('<br><span id="cnt'+tId+'"></span>');
        $(this).keyup(function () {
            var tId=$(this).attr("id");
            var tMax=$(this).attr("maxLength");//case-sensitive, unlike HTML input maxlength
            var left = tMax - $(this).val().length;
            if (left < 0) left = 0;
            $('#cnt'+tId).text('Characters left: ' + left);
        }).keyup();
    });
});
</script>
<textarea id="myTextarea" maxLength="200">Initial text lorem ipsum blah blah blah</textarea><br><br>
<textarea id="mySecondTextarea" maxLength="500"></textarea><br><br>
<textarea id="textareaWithoutCounter"></textarea>

Я использовал плагин Aaron Russell simply countable jQuery с успех

Простое использование:

$('#my_textarea').simplyCountable();

Расширенное использование:

$('#my_textarea').simplyCountable({
    counter: '#counter',
    countable: 'characters',
    maxCount: 140,
    strictMax: false,
    countDirection: 'down',
    safeClass: 'safe',
    overClass: 'over',
    thousandSeparator: ','
});

Я использовал jQuery и ответ от deceze, а затем настроил его, чтобы дать мне обратный отсчет в стиле твиттера, чтобы пользователи могли видеть, сколько они прошли, и соответствующим образом корректировать свой текст. Я также поместил его в отдельную функцию, чтобы вызывать его из другой функции, которая иногда автоматически заполняла текстовое поле:

    function reCalcToText() {
        var left = 200 - $('.toText').val().length;
        if (left < 0) {
            $('#counter').text(left);
            $('#counter').addClass("excess");
        } else {
            $('#counter').text(left);
            $('#counter').removeClass();
        }
    }
    function onReady() {
                  $('#<%= toText.ClientID %>').keyup(function() {
            reCalcToText();
        });
    };

Поэтому я взял версию @deceze и добавил к ней небольшой трюк:

• показывать всегда, а не только когда пользователь начинает печатать,
• показывать минус, когда лимит закончился, и

• добавить класс - чтобы раскрасить текст - когда он превышает лимит (для этого, конечно, нужен дополнительный css)

  $(document).ready(function(){
      var left = 200
      $('#field_counter').text('Characters left: ' + left);
  
          $('#id_description').keyup(function () {
  
          left = 200 - $(this).val().length;
  
          if(left < 0){
              $('#field_counter').addClass("overlimit");
          }
          if(left >= 0){
              $('#field_counter span').removeClass("overlimit");
          }
  
          $('#field_counter').text('Characters left: ' + left);
      });
  });
  

Для тех, кому нужно то же, что и мне :)

Используя jQuery, предполагая, что у вас есть текстовое поле с идентификатором field, которое вы хотите ограничить 100 символами, и еще один элемент с идентификатором chars-remaining для отображения количества доступных символов :

var max = 100;
$('#field').keyup(function() {
    if($(this).val().length > max) {
        $(this).val($(this).val().substr(0, max));
    }
    $('#chars-remaining').html((max - $(this).val().length) + ' characters remaining');
});

Имейте в виду, что вы должны учитывать, что NewLines состоит из 2 символов.
Я основывался на решениях, представленных здесь, для приведенного ниже кода, который учитывает новые строки.

function DisplayCharactersLeft(idOfInputControl) {
    var maxNumberOfCharacters = $("#" + idOfInputControl).attr("maxLength");

    $("#" + idOfInputControl).on("input", function () {
        var currentText = $(this).val();
        var numberOfNewLines = GetNumberOfNewLines(currentText);

        var left = maxNumberOfCharacters - (currentText.length + numberOfNewLines);
        if (left < 0) { left = 0; }
        $("#" + idOfInputControl + "CharactersLeftCounter").text("Characters left: " + left);
    });

}    

function GetNumberOfNewLines(text) {

    var newLines = text.match(/(\r\n|\n|\r)/g);
    var numberOfNewLines = 0;
    if (newLines != null) {
        numberOfNewLines = newLines.length;
    }
    return numberOfNewLines;
}