How can I bind to the change event of a textarea in jQuery?

javascript

event-listeners

input-event

debouncing

byAlex Kataev·Feb 9, 2025

To bind to changes in a textarea, use jQuery's powerful .on() function on the input event. This event represents user input, capturing typing, cutting, pasting, etc.

$('textarea').on('input', function() {
  console.log('Content is being updated by a very industrious user'); // Who knew typing could be so fun!
});

Going the distance: User experience & universal support

Reactively hide or show buttons

We can toggle the visibility of an element (like a button) based on whether our textarea is empty. Here's how:

// Dress code for our button: Now you see me, now you don't
$('#myButton').css('display', 'none'); // Hide the button initially

// Attach event listener to our textarea
$('textarea').on('input', function() {
  // Button enters limelight once partygoers (content) arrive
  // It shyly retreats when party's over
  $('#myButton').css('display', this.value !== '' ? 'inline-block' : 'none');
});

Enable/disable button lazily (no tabbing needed)

Eager to react the millisecond your user stops typing? Check the textarea value right as input happens, enabling or disabling a button on the fly:

// "You shall not pass!"... unless the textarea is filled
$('textarea').on('input', function() {
  var isEmpty = !$(this).val();
  $('#submit-button').prop('disabled', isEmpty);
});

Pure JavaScript for universal support

Got beef with jQuery? Here's the same thing with no-library, pure vanilla JS:

// Saving the world, one less jQuery user at a time
var textarea = document.getElementById('myTextarea');
var button = document.getElementById('myButton');

textarea.addEventListener('input', function() {
  // Now you see me, now you don't: Button edition
  button.style.display = this.value ? 'inline-block' : 'none';
});

Plugging to success

jQuery `textchange` plugin for wide browser support

The jQuery textchange plugin offers a textchange event, taking care of the cross-browser heavy lifting, so you can focus on what truly matters: making your site awesome.

$('textarea').on('textchange', function() {
  console.log('Magic of change but without the abracadabra');
});

Debouncing: Performance matters

Don't let input heavy lifting slow you down! Debounce the event to optimize performance.

// Why rush when you can chill, right?
function debounce(func, wait) {
  let timeout;
  clearTimeout(timeout);
  timeout = setTimeout(func, wait);
}

$('textarea').on('input', debounce(function() {
  console.log('Content updated, slowly but surely');
}, 250));

This code ensures the console.log fires no more than once every 250 milliseconds during continuous input.

Interactive feedback loop

How about we jazz this up further? Let's use input event to provide live feedback encouraging the user:

$('textarea').on('input', function() {
  var message = $(this).val().length < 20 ? 
                'Keep going!' : 'Brilliant! You should publish that!';
  $('#encouragement').text(message).show();
});