VoxelKit
← Back to library
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 maxlength get 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.