Count textarea characters

Question

I am developing a character count for my textarea on this website. Right now, it says NaN because it seems to not find the length of how many characters are in the field, wh

Answer 1

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

The above will do what you want. If you want to do a count down then change it to this:

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

Alternatively, you can accomplish the same thing without jQuery using the following code. (Thanks @Niet)

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

Answer 2

I found that the accepted answer didn't exactly work with textareas for reasons noted in Chrome counts characters wrong in textarea with maxlength attribute because of newline and carriage return characters, which is important if you need to know how much space would be taken up when storing the information in a database. Also, the use of keyup is depreciated because of drag-and-drop and pasting text from the clipboard, which is why I used the input and propertychange events. The following takes newline characters into account and accurately calculates the length of 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" />

Answer 3

This solution will respond to keyboard and mouse events, and apply to initial text.

    $(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>

Answer 4

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

Answer 5

For those wanting a simple solution without jQuery, here's a way.

textarea and message container to put in your form:

<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>

The script counts the characters initially and then for every keystroke and puts the number in the counter span.

Martin

Answer 6

This code gets the maximum value from the maxlength attribute of the textarea and decreases the value as the user types.

<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>