# Character Counter for Any Text Box With a Limit

> Shows a live "120 / 500 characters" counter under every text box that has a maximum length, announced politely to screen readers as the limit gets close.

- Type: JavaScript
- Runs: Site-wide footer
- Category: [Forms](https://wpide.com/library/category/forms/)
- Tags: forms, accessibility, textarea
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/form-textarea-character-counter/

## Code

```javascript
(function () {
    document.querySelectorAll('textarea[maxlength]').forEach(function (area) {
        var max = parseInt(area.getAttribute('maxlength'), 10);
        if (!max || max > 10000 || area.dataset.wpideCounter) {
            return;
        }
        area.dataset.wpideCounter = '1';

        var counter = document.createElement('p');
        counter.className = 'wpide-char-counter';
        counter.style.cssText = 'margin:.25em 0 0;font-size:.85em;opacity:.75;';
        counter.setAttribute('aria-live', 'polite');
        area.insertAdjacentElement('afterend', counter);

        var update = function () {
            var used = area.value.length;
            counter.textContent = used + ' / ' + max + ' characters';
            counter.style.opacity = used > max * 0.9 ? '1' : '.75';
            counter.setAttribute('aria-live', used > max * 0.9 ? 'polite' : 'off');
        };

        area.addEventListener('input', update);
        update();
    });
})();
```

## Notes

Works with any form that sets a maxlength of up to 10,000 characters on its textareas, including form plugins; very high technical limits (like the comment box's default) are ignored.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Character Counter for Any Text Box With a Limit" in its snippet library and add it in one click; or create a new JavaScript snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/