Noah's Pairwise Manifest
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    jquery.char-counterpublic

    jquery.char-counter

    A jQuery plugin for counting and limiting the characters in a textarea.

    Usage

    Let's assume you have a textarea with the id user_bio and a span with the id user_bio_counter. It would look like so:

    <textarea id="user_bio"></textarea>
    <span id="user_bio_counter"></span>
    

    To limit the number of characters in the textarea and the currently available number of characters into the span just do:

    $('#user_bio').charCounter({
      messageContainer: '#user_bio_counter'
    })
    

    In order to use a custom message you can just pass the parameter message:

    $("#user_bio").charCounter({
      messageContainer: '#user_bio_counter',
      message: 'Oh, you can only add %{count} more characters!'
    })
    

    The magic %{count} token will then be automatically replaced.

    You can also define the number of allowed characters either via passing limit or via specifying the attribute data-char-limit or via specifying the maxlength attribute on the textarea:

    $("#user_bio").charCounter({
      messageContainer: '#user_bio_counter',
      limit: 500
    })
    
    // or
    
    <textarea id="user_bio" data-char-limit="200"></textarea>
    
    // or
    
    <textarea id="user_bio" maxlength="200"></textarea>
    

    If you don't want to put counter into a pre-rendered container you can also let the plugin create the container for you. Just don't pass the messageContainer:

    $("#user_bio").charCounter()
    

    License

    Hereby place under MIT license.

    Keywords

    none

    install

    npm i jquery.char-counter

    Downloadsweekly downloads

    4

    version

    0.2.1

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar