Categories
JavaScript Answers

How to Count Text Area Characters with JavaScript?

Spread the love

Sometimes, we want to count text area characters with JavaScript.

In this article, we’ll look at how to count text area characters with JavaScript.

Count Text Area Characters with JavaScript

To count text area characters with JavaScript, we can listen to the keyup event on the text area.

Then in the event handler, we can get the length of the value of the text area input string value.

For instance, we can write:

<textarea></textarea>
<div id='count'>

</div>

to add the textarea element and the div to show the character count.

Then we write:

const textarea = document.querySelector('textarea')
const count = document.getElementById('count')
textarea.onkeyup = (e) => {
  count.innerHTML = "Characters left: " + (500 - e.target.value.length);
};

to get the textarea and div elements with document.querySelector and document.getElementById .

Then we set the textarea.onkeyup property to a function that takes the e event object as a parameter.

Then we get the input value with e.target.value which is a string.

The length property gets the character count.

We set count.innerHTML to some text that shows the character left count.

Now when we type something into the textarea , we see the character count.

Count

To count text area characters with JavaScript, we can listen to the keyup event on the text area.

Then in the event handler, we can get the length of the value of the text area input string value.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *