CODEWITHSUNDEEP
javascriptjqueryhtmltextarea
learn
learn

Reputation: 300

Character limit countdown for multiple textareas on the same page?

At the moment I am trying to create essentially the same type of countdown on twitter textareas. It does work for the first textarea but it then duplicates the same amount of characters remaining for all posts when I start typing in the first texarea.

What I need to know is how do I get the characters remaining for only the current textarea?

HTML:

<textarea name="comment" class="inputField newComment">@'.$post['username']." ".'</textarea>
<span class="countdown"></span>

jQuery: 

function updateCountdown() {

    var remaining = 140 - $('.newComment').val().length;
    $('.countdown').text(remaining + ' characters remaining');

    if(remaining < 0){

        $(this).siblings('.postComment').hide(500);

    }else{

        $(this).siblings('.postComment').show(500);
        if(remaining <= 10){
            $(this).siblings('.countdown').css("color","red");
        }else{
            $(this).siblings('.countdown').css("color","black");
        }
    }
}

$('.newComment').change(updateCountdown);
$('.newComment').keyup(updateCountdown);

Upvotes: 2

Views: 3661

Answers (2)

jamesnotjim
jamesnotjim

Reputation: 575

My version is a little longwinded, but it works and doesn't require a data-limit attribute (or any other attribute) on the textarea. In my case, I was struggling against an ancient version of jQuery and CMS with its own form builder and limited access to the HTML of the page.

Here's the HTML: 

<div id="counter">myTextArea</div>
<textarea id="myTextarea" rows="2" cols="30">   </textarea>

<div id="counter2">myTextArea2</div>
<textarea id="myTextarea2" rows="2" cols="30"></textarea>

And here's the jQuery: 

$(document).ready(function() {
    // set the IDs for the text areas and counters
    // handy for aliasing long, CMS-generated IDs
    var myTextarea = 'myTextarea';
    var counter = 'counter';
    var myTextarea2 = 'myTextarea2';
    var counter2 = 'counter2';

    $('#' + myTextarea).keyup(function () {
        var charLimit = 150; 
        var remainingChars = charLimit - $(this).val().length;
        if (remainingChars < 0) {
            // trim input, if necessary
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, charLimit));
            var tlength = $(this).val().length;
            remain = parseInt(tlength);
            $('#myTextarea').text(remain);
        }
        $('#' + counter).text('(' + remainingChars + ' characters left)');
    });
    $('#' + myTextarea2).keyup(function () {
        var charLimit = 150; 
        var remainingChars = charLimit - $(this).val().length;
        if (remainingChars < 0) {
            // trim input, if necessary
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, charLimit));
            var tlength = $(this).val().length;
            remain = parseInt(tlength);
            $('#myTextarea2').text(remain);
        }
        $('#' + counter2).text('(' + remainingChars + ' characters left)');
    });
});

Here's the JSFiddle:

https://jsfiddle.net/jamesnotjim/k9fzoytp/

Upvotes: 0

melc
melc

Reputation: 11671

Try something like this,

HTML

    <textarea name="comment" class="inputField newComment" data-limit=20></textarea>
<span class="countdown"></span>
<textarea name="comment" class="inputField newComment" data-limit=20></textarea>
<span class="countdown"></span>

JS

    $(document).ready(function () {
    $('textarea').on("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).next('span').text(remainingChars<=0?0:remainingChars);
    });
});

http://jsfiddle.net/qMbdW/3/

Upvotes: 2

Related Questions