Ответ 1

$("#textarea").keyup(function(){
  $("#count").text($(this).val().length);
});

Выше будет делать то, что вы хотите. Если вы хотите сделать счетчик вниз, измените его на это:

$("#textarea").keyup(function(){
  $("#count").text("Characters left: " + (500 - $(this).val().length));
});

В качестве альтернативы вы можете выполнить то же самое без jQuery, используя следующий код. (Спасибо @Niet)

document.getElementById('textarea').onkeyup = function () {
  document.getElementById('count').innerHTML = "Characters left: " + (500 - this.value.length);
};

Ответ 2

⚠️ Принятое решение устарело.

Вот два сценария, когда событие keyup не будет запущено:

1. Пользователь перетаскивает текст в текстовое поле.
2. Пользователь копирует и вставляет текст в текстовое поле с помощью щелчка правой кнопкой мыши (контекстное меню).

Вместо этого используйте событие input HTML5 для более надежного решения:

<textarea maxlength='140'></textarea>

JavaScript (демо):

const textarea = document.querySelector("textarea");

textarea.addEventListener("input", event => {
    const target = event.currentTarget;
    const maxLength = target.getAttribute("maxlength");
    const currentLength = target.value.length;

    if (currentLength >= maxLength) {
        return console.log("You have reached the maximum number of characters.");
    }

    console.log('${maxLength - currentLength} chars left');
});

И если вы абсолютно хотите использовать jQuery:

$('textarea').on("input", function(){
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        console.log(maxlength - currentLength + " chars left");
    }
});

Ответ 3

textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);

Вы вызываете textareaLengthCheck, а затем присваиваете его возвращаемое значение прослушивателю событий. Вот почему он не обновляет или ничего не делает после загрузки. Попробуйте следующее:

textarea.addEventListener("keypress",textareaLengthCheck,false);

Помимо этого:

var length = textarea.length;

textarea - это фактическое текстовое поле, а не значение. Вместо этого попробуйте:

var length = textarea.value.length;

В сочетании с предыдущим предложением ваша функция должна быть:

function textareaLengthCheck() {
    var length = this.value.length;
    // rest of code
};

Ответ 4

Вот простой код. Надеюсь, что он работает.

$(document).ready(function() {
var text_max = 99;
$('#textarea_feedback').html(text_max + ' characters remaining');

$('#textarea').keyup(function() {
    var text_length = $('#textarea').val().length;
    var text_remaining = text_max - text_length;

    $('#textarea_feedback').html(text_remaining + ' characters remaining');
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" rows="8" cols="30" maxlength="99" ></textarea>
<div id="textarea_feedback"></div>

Ответ 5

Этот код получает максимальное значение из атрибута maxlength textarea и уменьшает значение по типу пользователя.

< DEMO >

var el_t = document.getElementById('textarea');
var length = el_t.getAttribute("maxlength");
var el_c = document.getElementById('count');
el_c.innerHTML = length;
el_t.onkeyup = function () {
  document.getElementById('count').innerHTML = (length - this.value.length);
};

<textarea id="textarea" name="text"
 maxlength="500"></textarea>
<span id="count"></span>

Ответ 6

Для тех, кто хочет простое решение без jQuery, вот путь.

textarea и контейнер сообщений, чтобы поместить в вашу форму:

<textarea onKeyUp="count_it()" id="text" name="text"></textarea>
Length <span id="counter"></span>

JavaScript:

<script>
function count_it() {
    document.getElementById('counter').innerHTML = document.getElementById('text').value.length;
}
count_it();
</script>

script подсчитывает символы сначала, а затем для каждого нажатия клавиши и помещает номер в диапазон счетчика.

Martin

Ответ 7

var maxchar = 10;
$('#message').after('<span id="count" class="counter"></span>');
$('#count').html(maxchar+' of '+maxchar);
$('#message').attr('maxlength', maxchar);
$('#message').parent().addClass('wrap-text');
$('#message').on("keydown", function(e){
	var len =  $('#message').val().length;
	if (len >= maxchar && e.keyCode != 8)
		   e.preventDefault();
	else if(len <= maxchar && e.keyCode == 8){
		if(len <= maxchar && len != 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len +1));
	   	else if(len == 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len));
	}else
		 $('#count').html(maxchar+' of '+(maxchar - len-1)); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message" name="text"></textarea>

Ответ 8

Я обнаружил, что принятый ответ точно не работает с textarea по причинам, указанным в Chrome считает символы неправильными в textarea с атрибутом maxlength из-за новой строки и каретки возвращать символы, что важно, если вам нужно знать, сколько места будет занимать при хранении информации в базе данных. Кроме того, использование keyup обесценивается из-за перетаскивания и вставки текста из буфера обмена, поэтому я использовал события input и propertychange. Следующее принимает символы новой строки и точно вычисляет длину a textarea.

$(function() {
  $("#myTextArea").on("input propertychange", function(event) {
    var curlen = $(this).val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length;

    $("#counter").html(curlen);
  });
});

$("#counter").text($("#myTextArea").val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="myTextArea"></textarea><br>
Size: <span id="counter" />

Ответ 9

    $(document).ready(function(){ 
    $('#characterLeft').text('140 characters left');
    $('#message').keydown(function () {
        var max = 140;
        var len = $(this).val().length;
        if (len >= max) {
            $('#characterLeft').text('You have reached the limit');
            $('#characterLeft').addClass('red');
            $('#btnSubmit').addClass('disabled');            
        } 
        else {
            var ch = max - len;
            $('#characterLeft').text(ch + ' characters left');
            $('#btnSubmit').removeClass('disabled');
            $('#characterLeft').removeClass('red');            
        }
    });    
});

Ответ 10

Они говорят, что IE имеет проблемы с input событием, но кроме этого, решение довольно простое.

ta = document.querySelector("textarea");
count = document.querySelector("label");

ta.addEventListener("input", function (e) {
  count.innerHTML = this.value.length;
});

<textarea id="my-textarea" rows="4" cols="50" maxlength="10">
</textarea>
<label for="my-textarea"></label>

Ответ 11

Это решение будет реагировать на события клавиатуры и мыши и применяться к исходному тексту.

    $(document).ready(function () {
        $('textarea').bind('input propertychange', function () {
            atualizaTextoContador($(this));
        });

        $('textarea').each(function () {
            atualizaTextoContador($(this));
        });
    });

    function atualizaTextoContador(textarea) {
        var spanContador = textarea.next('span.contador');
        var maxlength = textarea.attr('maxlength');
        if (!spanContador || !maxlength)
            return;
        var numCaracteres = textarea.val().length;
        spanContador.html(numCaracteres + ' / ' + maxlength);
    }

    span.contador {
        display: block;
        margin-top: -20px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea maxlength="100" rows="4">initial text</textarea>
<span class="contador"></span>