How to make a character counter of a textarea?

Change the keydown event to input.

See the example:

$(document).on("input", "#TxtObservacoes", function () {
    var limite = 255;
    var caracteresDigitados = $(this).val().length;
    var caracteresRestantes = limite - caracteresDigitados;

    $(".caracteres").text(caracteresRestantes);
});

I also changed the name of one of the variables as a suggestion.

The input event covers several text input cases, such as copy and paste and hold a key. Other events end up generating the need for more code, complicating the problem.

Alternatively, if you need to support versions of browsers that do not implement the input event, use the keyup event. You can add both events in the .on () method of jQuery:

$(document).on("input keyup", "#TxtObservacoes", function () {
...

This solution is simple and complete:)

link

jQuery

$(document).on("input", "#comentario", function() {
    var limite = 145;
    var informativo = "caracteres restantes.";
    var caracteresDigitados = $(this).val().length;
    var caracteresRestantes = limite - caracteresDigitados;

    if (caracteresRestantes <= 0) {
        var comentario = $("textarea[name=comentario]").val();
        $("textarea[name=comentario]").val(comentario.substr(0, limite));
        $(".caracteres").text("0 " + informativo);
    } else {
        $(".caracteres").text(caracteresRestantes + " " + informativo);
    }
});

This is a functional example of counting characters in a textarea.

HTML

<span id="cont">50</span> Restantes <br>
<textarea onkeyup="limite_textarea(this.value)" id="texto"></textarea>

JavaScript

   function limite_textarea(valor) {
    quant = 50;
    total = valor.length;
    if(total <= quant) {
        resto = quant - total;
        document.getElementById('cont').innerHTML = resto;
    } else {
        document.getElementById('texto').value = valor.substr(0,quant);
    }
}

The function:

The variable quant delimits the maximum number of characters to fill Total receives the number of characters already typed in the field. It checks whether the total is less than or equal to the quantity, to see if it can still be filled. Rest receives the subtraction of quant minus the total to display how many characters can still be filled. Then write in% w_ of% the number of characters remaining. And if the amount is larger, it will block typing, by releasing the key the script will pick up any characters that are smaller than the amount.

The textarea field:

The only requirement in this field is that you have these two parameters: < span id="cont"> - calls the function when you release a key. onkeyup="limite_textarea(this.value)" - id of the field - for identification

var fieldArea = document.getElementById('countCharacters');
    var msgLimit = "Limite de carácteres excedido"; 

    if (fieldArea) {
        var countCharacters = fieldArea.onkeydown = function(e){
            var fieldMaxLength = fieldArea.maxLength;
            var fieldValueLength = fieldArea.value.length;

            var result = document.getElementById('result');

            var equation = fieldMaxLength - fieldValueLength;

            //Se os carácteres digitados for menor ou igual ao maxlength
            if (fieldValueLength <= fieldMaxLength) {
                result.innerText = equation + " carácteres restantes";
            }
            //Se os carácteres digitados tiver alcançado o maxlength
            if (fieldValueLength == fieldMaxLength) {
                result.innerText = msgLimit;
            }
            console.clear();
            console.log(fieldMaxLength);
            console.log(fieldValueLength);
            console.log(equation);          
        }       

        countCharacters();
    }