JQuery textarea character countdown on page load

Question

I use the jQuery function to generate a countdown of characters below the textarea field for our site users (the remaining X characters). My form lasts a few pages (somewhat reminiscent of a wizard), and users usually go back and forth across all pages. When I go back one step and reloading a page that has already been completed, my character countdown will display "3000 remaining characters." It does not consider the number of characters when loading the page. If the user returns through forms, I would like the function to be launched and count the number of characters that have already been entered in the textarea field.

# 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 <= 0) {
            $(this).val($(this).val().substring(0, limit));
        }
        $(this).closest('div').find(".countdown").text(remainingChars<=0?0:remainingChars);
    });
});

# HTML
<textarea data-limit="3000"></textarea>
<span class="countdown">3000</span> Characters Remaining

Answer 1

, . , ,

$(document).ready(function () {
    $('textarea').val('some text');
    $('textarea').on("load propertychange keyup input paste",
    function () {     
        var limit = $(this).data("limit");     
        var remainingChars = limit - $(this).val().length;      
        if (remainingChars <= 0) {
            $(this).val($(this).val().substring(0, limit));
        }
        $(".countdown").text(remainingChars<=0?0:remainingChars);
    });
  
  $('textarea').trigger('load');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea data-limit="3000"></textarea>
<span class="countdown">3000</span> Characters Remaining

Hide result

Answer 2

:

$('textarea').trigger('keyup');

jsfiddle

Answer 3

In your finished document form, simply add:

$('.countdown').text(
function () {
    var limit = $(this).data("limit");
    var remainingChars = limit - $(this).val().length;
    if (remainingChars <= 0) {
        $(this).val($(this).val().substring(0, limit));
    }
});

Since you are repeating an internal function that you can consider, take it out of every jquery statement and reference it inside

Answer 4

<textarea id="comments" cols="1000"  rows="3"></textarea>
Characters Remaining : <span id="countdown">200</span> 

<script type="text/javascript">
$(document).ready(function () {
    $('#comments').on("load propertychange keyup input paste",
    function () {     
        var limit = 200;     
        var remainingChars = limit - $(this).val().length;      
        if (remainingChars <= 0) {
            $(this).val($(this).val().substring(0, limit));
        }
        $("#countdown").text(remainingChars<=0?0:remainingChars);
    });

  $('#comments').trigger('load');
});
</script>