title: jQuery textarea character countdown on page load
body: <p>I am using a jQuery function to generate a character countdown below a textarea field for our site's users (X Characters Remaining). My form is several pages long (somewhat like a wizard) and users typically go forward and back throughout the pages. When I go back a step and reload a page that was already completed, my character countdown displays '3000 Characters Remaining'. It's not counting the number of characters on page load. If a user goes back through the forms, I would like the function to be triggered and count the number of characters that were already entered into the textarea field. </p>
  
  <pre><code># The jQuery Function
  $(document).ready(function () {
      $('textarea').on("load propertychange keyup input paste",
      function () {
          var limit = $(this).data("limit");
          var remainingChars = limit - $(this).val().length;
          if (remainingChars &lt;= 0) {
              $(this).val($(this).val().substring(0, limit));
          }
          $(this).closest('div').find(".countdown").text(remainingChars&lt;=0?0:remainingChars);
      });
  });
  
  # HTML
  &lt;textarea data-limit="3000"&gt;&lt;/textarea&gt;
  &lt;span class="countdown"&gt;3000&lt;/span&gt; Characters Remaining
  </code></pre>