Textarea Onchange: Get The HTML Code To Trigger A JavaScript Event Now

Attribute of

HTML5 Textarea Attributes: Here's What You Should Know

What does Textarea Onchange: Get The HTML Code To Trigger A JavaScript Event Now do?

Adds an event listener to a <textarea> which executes JavaScript scripting when an onchange event occurs.

Code Example

<form>
<textarea 
  onchange="alert('You just changed the textarea.')"
  placeholder="Type in this box. When you click away an alert will be generated.">
</textarea>
</form>

What Can We do with onchange?

The onchange JavaScript event is triggered when an element is changed and then loses focus. In the context of a textarea, this happens when the content of the textarea is modified and then the textarea loses focus because the user clicks away or presses the tab key.

The onchange element could be used on a textarea to launch a script after the user finishes filling in the field. The script could do something like enable the form submit button or enable a follow-up field that shouldn’t be completed until the textarea has received input.

onchange vs. oninput

Another JavaScript event that is quite similar to onchange is oninput. The difference is that oninput is triggered every time the value of an element changes even while it still is in focus. So, if we were to substitute oninput for onchange in the textarea code in the example above, we’d get the following rather annoying alert-generating textarea.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.