Character Counter
Show remaining characters for textarea and input fields in real time — important for social-network style inputs with limits.
jQuery
Beginner
3 min read
Character Counter for Inputs
Example
$("textarea[maxlength]").each(function() {
const max = $(this).attr("maxlength");
const $counter = $(`<small class="text-muted char-count">${max} remaining</small>`).insertAfter(this);
$(this).on("input", function() {
const left = max - this.value.length;
$counter.text(`${left} remaining`).toggleClass("text-danger", left < 20);
});
}); Pro Tip
Change counter colour to red when approaching the limit — gives users a visual warning before they hit the cap.