Detect if textarea content has changed with JavaScript/jQuery

This post will discuss how to detect if textarea content has changed in JavaScript and jQuery.

1. Using jQuery

With jQuery, you can bind the input JavaScript event to the textarea, which fires when the value of a <textarea> element changes. The input event fires on standard input, on paste, auto-fill, etc.

The following example throws an alert whenever the <textarea> content is changed.

JS

$(document).ready(function() {

$('#story').on('input', (event) => alert('Changed!'));

});

HTML

Once upon a time…

</textarea>

Edit in JSFiddle

Note that the change event fires once only when the value is committed (i.e., when the <textarea> loses focus), unlike the input event, which fires every time the value is changed. You can use it depending upon your use case.

JS

$("#story").change(function() {

alert('Textarea is changed');

});

HTML

Once upon a time…

</textarea>

Edit in JSFiddle

2. Using JavaScript

In pure JavaScript, you can bind the input JavaScript event to the textarea with the addEventListener() method. Here’s a working example in JavaScript.

JS

1 2	document.getElementById("story") .addEventListener("input", (event) => alert("Changed!"));

HTML

Once upon a time…

</textarea>

Edit in JSFiddle

Alternatively, you can use the oninput property to specify an event handler to receive input events. In the following example, the oninput event handler is fired whenever any change is the textarea.

HTML

Once upon a time…

</textarea>

JS

1	var display = () => alert("Changed!");

Edit in JSFiddle

That’s all about detecting if textarea content has changed in JavaScript and jQuery.