Textarea Character Counter with jQuery

This tutorial limits text entry to a fixed number of characters and displays the current count. The original page used keyup; the current examples use input so typing, paste and other input methods are counted.

HTML Top ↑

<textarea id="t1"
          name="t1"
          rows="4"
          maxlength="50"
          class="form-control"></textarea>

<div id="d1">0 / 50</div>

Basic Counter Top ↑

$( "#t1" ).on( "input", function () {
    const length = $( this ).val().length;
    $( "#d1" ).text( length + " / 50" );
});

Live demo: textarea counter →

Counter with jQuery UI Progressbar Top ↑

$( "#p1" ).progressbar({
    value: 0,
    max: 50
});

$( "#t1" ).on( "input", function () {
    const length = $( this ).val().length;

    $( "#d1" ).text( length + " / 50" );
    $( "#p1" ).progressbar(
        "value",
        length
    );
});

Live demo: counter with Progressbar →

jQuery UI Progressbar tutorial · keyup event reference

Additional Original Learning Routes Top ↑

These original tutorial/demo routes are retained so no useful learner path is lost:

• msg-demo/password-validation.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: