Skip to content

Instantly share code, notes, and snippets.

@thatdevgirl

thatdevgirl/character-counter.html

Last active December 19, 2019 20:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thatdevgirl/c4e3199869258224353a5ecaf2fee271 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thatdevgirl/c4e3199869258224353a5ecaf2fee271 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. thatdevgirl revised this gist Dec 19, 2019. 1 changed file with 19 additions and 19 deletions.
    38 changes: 19 additions & 19 deletions character-counter.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,25 +1,25 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <title>Character Count using jQuery</title>
    </head>

    <body>
    <header>
    <h1>Character Count using jQuery</h1>
    </header>

    <main>
    <textarea class="countMe"></textarea>
    </main>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="character-counter.js"></script>
    <head>
    <title>Character Count using jQuery</title>
    </head>

    <script>
    $( '.countMe' ).characterCount( 250 );
    </script>
    </body>
    <body>
    <header>
    <h1>Character Count using jQuery</h1>
    </header>

    <main>
    <textarea class="countMe"></textarea>
    </main>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="character-counter.js"></script>

    <script>
    $( '.countMe' ).characterCount( 250 );
    </script>
    </body>

    </html>
  2. thatdevgirl created this gist Dec 19, 2019.
    25 changes: 25 additions & 0 deletions character-counter.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <title>Character Count using jQuery</title>
    </head>

    <body>
    <header>
    <h1>Character Count using jQuery</h1>
    </header>

    <main>
    <textarea class="countMe"></textarea>
    </main>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="character-counter.js"></script>

    <script>
    $( '.countMe' ).characterCount( 250 );
    </script>
    </body>

    </html>
    24 changes: 24 additions & 0 deletions character-counter.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    // Append a character count element in the DOM.
    $.fn.characterCount = function(max) {
    if (this.val() == undefined) { return false; }

    // Calculate remaining characters based on the initial value of the field.
    var remaining = max - this.val().length;

    // Display initial remaining character count message.
    this.after(
    '<div class="characterCount">' +
    '(<span>' + remaining + '</span> characters remaining)' +
    '</div>');

    // Set the max length of the text area.
    this.attr('maxlength', max);

    // Keyup event to update remaining character count message.
    var parent = this.parent();

    this.keyup(function() {
    var remaining = max - $(this).val().length;
    $('.characterCount span', parent).html(remaining);
    })
    };