Forms & submission Free
Textarea character counter
Show a live remaining-characters count under any textarea with a maxlength attribute.
Great place, very…
182 / 300
document.querySelectorAll('textarea[maxlength]').forEach(function (area) {
var max = parseInt(area.getAttribute('maxlength'), 10);
if (!max) return;
var counter = document.createElement('div');
counter.className = 'char-counter';
area.insertAdjacentElement('afterend', counter);
var update = function () {
counter.textContent = (max - area.value.length) + ' characters left';
};
area.addEventListener('input', update);
update();
});
Add a maxlength attribute to any textarea and this script inserts a live counter beneath it that updates as the user types. Style the injected .char-counter element to match your form.
Notes
- Only textareas that already have a numeric
maxlengthget a counter. - Load the script after the form renders (Elementor HTML widget or a footer include).
- Add your own CSS for
.char-counter, for example small muted text aligned right.