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

Question

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

Я нашел этот плагин jquery; плагин максимальной длины jquery

Он делает то, что мне нужно, но кажется, что это излишнее, я не уверен, что размер файла, но он выглядит как много строк кода для такой простой задачи, как вы думаете, мне было бы лучше использовать не метод запроса? Причина, по которой я думал, что jquery - это путь, заключается в том, что jquery уже включен во все мои страницы UPDATE;

Я только что обнаружил, что не-jquery метод, который делает то же самое, намного меньше, так что это будет лучший метод?

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
   if (limitField.value.length > limitNum) {
    limitField.value = limitField.value.substring(0, limitNum);
   } else {
    limitCount.value = limitNum - limitField.value.length;
   }
}
</script>

You have 
<input readonly type="text" name="countdown" size="3" value="1000">
characters left.

Answer 1

Очень просто в 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 любым вашим лимитом.

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

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

Answer 2

Иногда вам нужно иметь более одной текстовой области, и вы хотите, чтобы они были адресованы индивидуально, без необходимости кодировать каждую из них. Этот код динамически добавляет оставшиеся символы к любому, имеющему атрибут 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>

Answer 3

Я использовал просто подсчитываемый плагин Аарона Рассела с успехом

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

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

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

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

Answer 4

 var max = 140;
        $("#spn").html(max+"  Remaining");
        $("#textarea").keyup(function () {
            var lenght1 = $("#textarea").val().length;
            var remaining = max - lenght1;
            $("#spn").html(remaining + "  Remaining");
            if (remaining < 0) { $("#spn").css('opacity', '0.4').css('color', 'red'); $("#comment").attr('disabled', 'disabled'); } else { $("#spn").css('opacity', '1').css('color', 'black'); $("#comment").removeAttr('disabled'); }
            if (remaining < 10) { $("#spn").css('color', 'red'); } else { $("#spn").css('color', 'black'); }

        });

Answer 5

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function()
        {
            $('#TestId').keyup(function(e)
            {
                var maxLength = 100;
                var textlength = this.value.length;
                if (textlength >= maxLength)
                {
                    $('#charStatus').html('You cannot write more then ' + maxLength + ' characters!');
                    this.value = this.value.substring(0, maxLength);
                    e.preventDefault();
                }
                else
                {
                    $('#charStatus').html('You have ' + (maxLength - textlength) + ' characters left.');
                }
            });
        });
    </script>
</head>
<body>
    <textarea id="TestId" cols="20" rows="8"></textarea><br />
    (Maximum characters: 100)<br />
    <span id="charStatus"></span>   
</body>
</html>

Answer 6

Итак, я взял версию @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);
      });
  });
  

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

Answer 7

Я использовал 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();
        });
    };

Answer 8

Имейте в виду, что вы должны учитывать, что 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;
}

Answer 9

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

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