Can I add a max-length to my textarea?

Yes: use the HTML maxlength attribute. It hard-stops typing at the limit. For soft warning instead, use JavaScript to color-change the counter.

How do I trigger the counter on page load?

Call the handler manually: $('#text').trigger('input'). This updates the counter with any pre-filled content.

What's the equivalent in React?

See our React tutorial for the modern component-based version.

Why does my counter show NaN?

Usually because parseInt received an undefined value. Check that the maxlength attribute is set and that the input/element exists when the handler runs.

🔌

jQuery Tutorial

How to Count Characters with jQuery

jQuery makes it easy to attach a live character counter to any textarea or input in two lines of code. This tutorial covers the basic pattern plus enhanced versions with max-length, color changes, and a comparison with vanilla-JS alternatives. For a modern, dependency-free version see our JavaScript tutorial or the React-component version in our React tutorial.

Basic live character counter

Two-line version — attach a keyup handler to the input and update a counter element.

javascript

$('#text').on('keyup input', function() {
  $('#counter').text($(this).val().length + ' characters');
});

With HTML

Complete example with markup.

html

<textarea id="text" maxlength="280" rows="4"></textarea>
<span id="counter">0 / 280</span>

<script>
$(function() {
  const $text = $('#text');
  const $counter = $('#counter');
  const max = parseInt($text.attr('maxlength'), 10);

  $text.on('input', function() {
    const len = $(this).val().length;
    $counter.text(len + ' / ' + max);
  });
});
</script>

With max-length warning

Change color when approaching the limit.

javascript

$('#text').on('input', function() {
  const len = $(this).val().length;
  const max = 280;
  const remaining = max - len;
  const $counter = $('#counter');

  $counter.text(remaining + ' remaining');

  if (remaining < 0) {
    $counter.css('color', 'red');
  } else if (remaining < 20) {
    $counter.css('color', 'orange');
  } else {
    $counter.css('color', 'gray');
  }
});

Multiple counters from one handler

Attach to every textarea on the page with data attributes.

javascript

// HTML:
// <textarea data-max="280" data-counter="tweetCount"></textarea>
// <span id="tweetCount"></span>

$('textarea[data-max]').on('input', function() {
  const $this = $(this);
  const max = parseInt($this.data('max'), 10);
  const counterId = $this.data('counter');
  const len = $this.val().length;
  $('#' + counterId).text(len + ' / ' + max);
});

Modern vanilla-JS equivalent (no jQuery)

If you don't already use jQuery, vanilla JS is simpler. Same functionality, no dependency.

javascript

const text = document.querySelector('#text');
const counter = document.querySelector('#counter');

text.addEventListener('input', () => {
  counter.textContent = `${text.value.length} characters`;
});