CODEWITHSUNDEEP
javascriptjquery
gotsame
gotsame

Reputation: 43

How to have multiple character counts on the same web page without each character count affecting each other?

How can I have the character count affect different textarea fields on the same web page with out it affecting each others character count. I have textarea fields with an id of #description and another id of #another-description

HTML

<li><textarea name="description" id="description"></textarea>
<div><span class="character-count"></span></div></li>

<li><textarea name="another_description" id="another-description"></textarea>
<div><span class="character-count"></span></div></li>

Jquery

$(document).ready(function() {  
    var max = 4000;
    $('.character-count').text('4000 characters left');
    $('#description')
    .keydown(function(event){
        if (event.keyCode != 8 && event.keyCode != 46 && $(this).val().length >= max) {
            event.preventDefault();
        }
    })
    .keyup(function(){
        var $this = $(this),
            val = $this.val().slice(0, max),
            val_length = val.length,
            left = max - val_length;

        $('.character-count').text(left + ' characters left');

        $this.val(val);
    });
});

Upvotes: 1

Views: 63

Answers (3)

Sashant Pardeshi
Sashant Pardeshi

Reputation: 1095

Please try code below, your code is very much fine. I have created function with which you can apply on as many textfields. Please refer jsfiddle - https://jsfiddle.net/sashant9/8feprLfa/

HTML -->

<span id="character-count-1" ></span>
<textarea id="description_1"></textarea>
</br></br>
<span id="character-count-2" ></span>
<textarea id="description_2"></textarea>

jQuery -->

    var max = 4000;
    var textbox_selector_1 = '#description_1';
    var textbox_selector_2 = '#description_2';
    var count_indicator_1 = '#character-count-1';
    var count_indicator_2 = '#character-count-2';

    textbox_character_count(count_indicator_1, textbox_selector_1);
    textbox_character_count(count_indicator_2, textbox_selector_2);



function textbox_character_count(count_indicator_1, textbox_selector_1){
    $(count_indicator_1).text('4000 characters left');

       $(textbox_selector_1)
    .keydown(function(event){
        if (event.keyCode != 8 && event.keyCode != 46 && $(this).val().length >= max) {
            event.preventDefault();
        }
    })
    .keyup(function(){
        var $this = $(this),
            val = $this.val().slice(0, max),
            val_length = val.length,
            left = max - val_length;

        $(count_indicator_1).text(left + ' characters left');

        $this.val(val);
    });

}

Upvotes: 0

TbWill4321
TbWill4321

Reputation: 8676

You can create a function that keeps each variable in a closure:

function countCharacters( input, output, max ) {
    var $input = $(input);
    var $output = $(output);
    $output.text(max + ' characters left');
    $input
        .keydown(function(event) {
            if (event.keyCode != 8 &&
                event.keyCode != 46 &&
                $input.val().length >= max)
                event.preventDefault();
        })
        .keyup(function() {
            var val = $input.val().slice(0, max);
            var left = max - val.length;
            $input.val(val);
            $output.text(left + ' characters left');
        });
}
countCharacters('#description', '.character-count', 4000);
countCharacters('#another_description', '.character-count-2', 3000);

Edit: To specifically handle identical classes, use the sibling selector:

countCharacters('#description', '#description + div .character-count', 4000);
countCharacters('#another_description', '#another_description + div .character-count', 3000);

Upvotes: 2

Niki van Stein
Niki van Stein

Reputation: 10734

Just add ids to your spans like

<li><textarea name="description" id="description"></textarea>
<div><span class="character-count" id="count1"></span></div></li>

<li><textarea name="another_description" id="another-description"></textarea>
<div><span class="character-count" id="count2"></span></div></li>

If you want to affect only the count label of description, use the id count1

 $('#count1').text(left + ' characters left');

Upvotes: 0

Related Questions