Character counters are a small but important part of modern web interfaces. They help users write social media bios, product descriptions, comments, and other text fields without exceeding a predefined limit.

However, implementing a reliable character counter involves more than displaying text.length next to a textarea.

Unicode characters, accessibility, real-time feedback, and server-side validation can all affect whether the counter behaves as users expect.

In this tutorial, we'll build a practical character counter in JavaScript, explore common implementation mistakes, and discuss how to make text limits more predictable and accessible.

1. Start with a Simple Character Counter

Let's begin with a textarea that allows up to 160 characters.

<label for="message">Your message</label>

<textarea
  id="message"
  maxlength="160"
  aria-describedby="counter"
></textarea>

<p id="counter">0 / 160 characters</p>

We can use JavaScript to update the counter whenever the input changes.

const textarea = document.querySelector("#message");
const counter = document.querySelector("#counter");
const maxLength = 160;

function updateCounter() {
  counter.textContent =
    `${textarea.value.length} / ${maxLength} characters`;
}

textarea.addEventListener("input", updateCounter);

updateCounter();

The input event fires when users type, delete, paste, or otherwise change the field's value.

The HTML maxlength attribute prevents the user from entering more than the configured number of UTF-16 code units in this example.

This is a reasonable starting point for many applications, but there is an important detail to understand before using it in production.

2. Understand How JavaScript Counts Characters

JavaScript's length property does not always match what people perceive as a character.

Consider the following examples:

console.log("Hello".length); // 5
console.log("😀".length);    // 2

The emoji appears as one symbol, but JavaScript reports a length of two because strings are represented using UTF-16 code units.

If your application's requirements define characters as Unicode code points, the spread operator provides a simple alternative:

const text = "Hello 😀";

console.log([...text].length); // 7

For applications that need to count user-perceived characters, Unicode grapheme clusters are often more appropriate.

const segmenter = new Intl.Segmenter(undefined, {
  granularity: "grapheme"
});

function countCharacters(text) {
  return [...segmenter.segment(text)].length;
}

console.log(countCharacters("Hello 😀"));

Grapheme segmentation handles many cases where a visible symbol consists of multiple code points, such as certain accented characters and emoji sequences.

The important question is not which counting method is universally best. It's which definition your application needs.

If an external platform imposes a character limit, verify how that platform counts characters. Your interface should follow the same convention whenever possible.

3. Add Remaining-Character Feedback

Displaying the total length is useful, but showing how many characters remain can make the interface more intuitive.

For a 160-character field, a user might prefer to see:

32 characters remaining

We can calculate the remaining capacity with a simple expression:

const remaining = maxLength - textarea.value.length;

Then update the counter:

function updateCounter() {
  const remaining = maxLength - textarea.value.length;

  counter.textContent =
    `${remaining} characters remaining`;
}

For a more polished interface, use different visual states as the user approaches the limit.

For example:

• Normal state: plenty of space remains.
• Warning state: only a few characters remain.
• Limit reached: no additional characters can be entered.

Avoid making the warning unnecessarily aggressive. A subtle change in color and a clear message are generally preferable to a flashing indicator or an intrusive popup.

Also, never communicate the warning through color alone. Include text or another accessible indicator so the meaning remains clear.

4. Make the Counter Accessible

A character counter should work for people using keyboards, screen readers, and other assistive technologies.

The aria-describedby attribute connects the textarea to its descriptive counter:

<textarea
  id="message"
  maxlength="160"
  aria-describedby="counter"
></textarea>

<p id="counter">160 characters remaining</p>

This gives assistive technologies additional context about the field.

You might also consider aria-live="polite" when you need counter updates announced dynamically. However, announcing every keystroke can become distracting, particularly in long text fields.

For production applications, consider announcing only meaningful changes, such as when the user approaches the limit or has reached it.

The goal is to provide useful feedback without overwhelming the person entering text.

5. Use a Standalone Tool When Drafting Text

Character limits are not exclusive to application developers. Writers, content creators, marketers, and ecommerce teams often need to check text length before pasting content into a platform.

A product title might have a strict maximum length. An SEO description may need to fit a particular guideline. A social media bio might allow only a limited number of characters.

When preparing text outside the destination application, a dedicated counter can simplify the workflow.

For example, Wivilo's Character Counter provides a browser-based way to check text length before using it in another application.

This can save time when comparing alternative headlines, trimming descriptions, or preparing content for fields with strict limits.

The broader UX principle is simple: help users identify constraints as early as possible, rather than waiting until a submission fails.

When working with sensitive information, avoid entering confidential text into third-party tools unless their data-handling practices are appropriate for your requirements.

6. Validate Input on the Server

Client-side validation improves the immediate user experience, but it should not be the only enforcement mechanism.

The maxlength attribute can be bypassed by sending a request directly to an endpoint. The server must validate incoming data before accepting or storing it.

A basic JavaScript validation function might look like this:

function validateMessage(message, maxLength = 160) {
  if (typeof message !== "string") {
    throw new Error("Message must be a string.");
  }

  if (message.length > maxLength) {
    throw new Error("Message exceeds the maximum length.");
  }

  return true;
}

This example counts UTF-16 code units. If the application uses grapheme clusters or another convention, adjust the validation accordingly.

In a real application, the server should also validate required fields, data types, and any other business rules.

Keep front-end and back-end validation consistent. Otherwise, a user may see that their text fits in the browser only to have the server reject it.

7. Test Edge Cases Before Shipping

A character counter can appear correct during ordinary typing while still failing in less common situations.

Before releasing it, test:

• Empty input.
• Text pasted from another application.
• Emoji and combined Unicode characters.
• Text exactly at the maximum length.
• Text longer than the permitted limit.
• Keyboard navigation and screen-reader feedback.
• Differences between client-side and server-side counting.
• Changes to the configured maximum length.

If the field accepts international text, include examples from the languages your application supports.

These tests help identify discrepancies before they become confusing user-facing errors.

Conclusion

A reliable character counter combines accurate counting, clear feedback, accessibility, and consistent validation.

Start with a simple implementation using the input event and maxlength. Then decide whether UTF-16 code units, Unicode code points, or grapheme clusters match your requirements.

Make limits visible, provide helpful feedback, and validate the data on the server before processing it.

Small interface details can have a meaningful effect on usability. When users understand their constraints and receive immediate, predictable feedback, completing a form becomes a smoother experience.