CODEWITHSUNDEEP
javascript
Vinicius Santana
Vinicius Santana

Reputation: 4106

How to do JavaScript to Count how many remaining words are on a combination of 4 textarea fields

I have a situation here where I have to limit the users to type only 300 chars on a combination of 4 textarea fields. For example, if he types 300 on the first, he wouldn't be able to type nothing else on the second or he could also type 75 words on each.

I'm trying to make a JS to count the remaining words and also limit the field to don't accept more words when the remaining words become 0.

Can anyone help? It would be nice if it was something that would follow on this structure.

<textarea id="MyTextBox1" class="MyTextBox" cols="60" rows="8"></textarea>
<textarea id="MyTextBox2" class="MyTextBox" cols="60" rows="8"></textarea>
<textarea id="MyTextBox3" class="MyTextBox" cols="60" rows="8"></textarea>
<textarea id="MyTextBox4" class="MyTextBox" cols="60" rows="8"></textarea>

<p><span id="remainingWords"></span> Words Remaining</p>

I managed to get a working sample but only for one for the first textarea and I'm kind stock now.

http://jsfiddle.net/vinicius5581/waayh7xu/2/

Upvotes: 1

Views: 760

Answers (3)

Kami
Kami

Reputation: 19407

Try something like

$(document).ready(function () {
        $('.MyTextBox').live("keyup", function (e) {
            var v = "";
            $('.MyTextBox').each(function() { v = v + " " + $(this).val().trim(); }
            var WordsUsed = v.replace(regex, ' ').split(' ').length;
            WordsRemaining = parseInt(WordsLimit) - parseInt(WordsUsed);
            if (WordsUsed == WordsLimit) {
                $('#remainingWords').html("0 Words remaining.");
                $('#ExtraWords').html("");
            }
            else if (WordsUsed > WordsLimit) {
                $('#remainingWords').html("0");
                var extraWord = parseInt(WordsUsed) - parseInt(WordsLimit);
                $('#ExtraWords').html("You have entered " + extraWord + " extra Words!!");
            } else {
                $('#remainingWords').html(WordsRemaining);
            }
        });
    });

The above will work with all .MyTextBox class elements and count the number of words used in each. It also nicely keeps track of the total utilising your existing code.

See fiddle - http://jsfiddle.net/2b6agtt9/

In response to OP's comments I have added some additional code that attempts to block the entry for additional text after a limit. The original code attempted to make the text boxes readonly, but ofcourse this would prevent editing. So I am proposing a solution that works based on the keys pressed.

To prevent extra words after the limit try something like this

        $('.MyTextBox').live("keydown", function (e) {
            console.log(e);
            if (WordsRemaining == 0) {
                // Allow all characters except space
                if (e.keyCode == 32) return false;
            } else if (WordsRemaining < 0) {
                if (e.keyCode > 46 || e.keyCode == 32) return false;
            }
        });

The above code is not completely fool proof, but will prevent obvious errors.

It will prevent the adding of an additional word with the word limit is reached, the user is ableto edit existing words as needed. If the word limit is circumvented in some way, perhaps by pasting a large body of text, then it will prevent adding of additional text, while allowing editing and highlighting the extra word count.

Updated fiddle at : http://jsfiddle.net/2b6agtt9/2/

Upvotes: 1

Manjar
Manjar

Reputation: 3268

You can try this one, much simpler :)

var limit = 300;
$("textarea").on('keydown',function(e){
    var count=0;

    $("textarea").each(function(index,elem){     
        count += $(elem).val().length;
    })

    if (count>= limit) 
    {
        e.preventDefault();
        e.stopPropagation();
    }

    $('#ExtraWords').html(limit - count);
})

http://jsfiddle.net/waayh7xu/7/

Upvotes: 0

somethinghere
somethinghere

Reputation: 17350

This one isn't very hard, you just have to keep counting for every text area you have. For ease of use I;m assuming the four text areas are the only ones on the page, but otherwise you could use a class selector. This is what worked for me:

$('textarea').live("keyup", function (e) {
    var WordsUsed = 0;
    function countWords(textarea){
        // be sure to check if theres a value, as split.length will return 1 if it didn't split anywhere.
        return textarea.val() != ""
            ? textarea.val().trim().split(' ').length
            : 0;
    }
    WordsUsed += countWords( $('#MyTextBox1'));
    WordsUsed += countWords( $('#MyTextBox2'));
    WordsUsed += countWords( $('#MyTextBox3'));
    WordsUsed += countWords( $('#MyTextBox4'));
    // do the rest of your code here - I'm not going to repeat it but it works
});

I used a temporary function called countWords - I have it in the local context here but it is useful in the global as well. Then I run through all the text areas (you could also just run through al of them with a for loop and without a function in the local scope.). Now the amount of words used is the combo of all the text fields and you can disable all of them once you hit to many words.

Upvotes: 1

Related Questions