How to use jQuery to implement a word counter for a text area



Image not found!!

To implement a word counter for a text area using jQuery, you can use the following example code. This code assumes you have included the jQuery library in your HTML file. If not, you can include it by adding the following script tag in the <head> section of your HTML document:

html
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

Now, you can create a text area and a counter in your HTML file, and use jQuery to update the counter based on the number of words entered in the text area. Here's an example:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Word Counter</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script>
    $(document).ready(function() {
      // Function to update word count
      function updateWordCount() {
        var text = $('#textarea').val();
        var words = text.trim().split(/\s+/).length;
        $('#wordCount').text(words);
      }

      // Bind the function to the input event of the textarea
      $('#textarea').on('input', updateWordCount);
    });
  </script>
</head>
<body>
  <label for="textarea">Enter text:</label>
  <textarea id="textarea" rows="5" cols="40"></textarea>

  <p>Word count: <span id="wordCount">0</span></p>
</body>
</html>

In this example, the updateWordCount function is called whenever the user types in the text area. The function calculates the number of words in the text and updates the content of the #wordCount span element with the result. The event is bound using the on method with the 'input' event, which triggers whenever the user types or pastes text into the textarea.

Category List