CODEWITHSUNDEEP
javascriptjquery
Shaan_14
Shaan_14

Reputation: 51

How to limit the amount of words across multiple textareas?

I have Word Limit of 300 Words on 4 textareas on whole i.e. word count of 4 textareas should not cross 300 on whole. How can I achieve this, although I have gone through many articles on this, which show only on single textarea.

Upvotes: 0

Views: 334

Answers (3)

DavidDomain
DavidDomain

Reputation: 15293

This would be an option i guess. Just change limit to your desired need e.g 300. I left it at 3 for testing purpose. The good thing is that this way we are not disabling the keyup event handler, if we exceed the limit the words get cut off the textarea by using substr with the current value.length -1. So for example if i type 3 words in the first textarea and the limit is reached, i can still delete one word from the first textarea and type it into the second textarea, which would not be possible if we return false after limit is reached. To detect copy/paste actions i have added the paste listener and check if we've reached the limit to omit pasting more words than the actual limit of words. But pasting is still possible even across the textareas.

$(function () {

  var total = 0,
      limit = 3,
      $textArea = $('textarea');

  function addToTotal(collection, pastedWordCount) {
    var wordCount = 0;
    $textArea.each(function(index, element) {
      if (!!element.value.match(/\S+/g)) {
        wordCount += element.value.match(/\S+/g).length;
      }
    });
    if (pastedWordCount !== undefined && pastedWordCount !== 0) {
      wordCount = pastedWordCount;
    }
    return wordCount;
  }

  $textArea.on("keyup", function () {
    total = addToTotal($textArea);
    if (total > limit) {
      this.value = this.value.substr(0, this.value.length -1);
    }
  });

  $textArea.on("paste", function (evt) {
    var pasteDataWordCount = 0;
    if (!!evt.originalEvent.clipboardData.getData('text').match(/\S+/g)) {
      pasteDataWordCount = evt.originalEvent.clipboardData.getData('text').match(/\S+/g).length; 
    }
    total += addToTotal($textArea, pasteDataWordCount);
    if (total > limit) {
      return false;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea name="" id="text1" cols="30" rows="10"></textarea>
<textarea name="" id="text2" cols="30" rows="10"></textarea>
<textarea name="" id="text3" cols="30" rows="10"></textarea>
<textarea name="" id="text4" cols="30" rows="10"></textarea>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Update: Word Count, instead of char count!

Beware, this code doesn't check the copy paste counts. For this:

  1. Either I have to disable copy paste. (Functionality Loss)
  2. Or I should trim off the text after paste. (Data Loss)

I don't understand why this should be a problem. You can try this:

$(function () {
  $("textarea").keydown(function () {
    val = 0;
    $("textarea").each(function () {
      if ($(this).val().trim().length > 0)
        val += $(this).val().trim().replace(/\s+/gi, ' ').split(' ').length  ;
    });
    if (val > 300)
      return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea name="" id="text1" cols="30" rows="10"></textarea>
<textarea name="" id="text2" cols="30" rows="10"></textarea>
<textarea name="" id="text3" cols="30" rows="10"></textarea>
<textarea name="" id="text4" cols="30" rows="10"></textarea>

Upvotes: 1

KDP
KDP

Reputation: 1481

1) This can be achieved by declaring a global variable which keeps the count of the words in all the three text areas.

2) Onkeyup event of each text area increment the global variable declared and check the current value.if it is less than 400 allow to enter else alert or do the action as required

check the following sample

            <html>
        <script>
        var globalCount=0;
        function fun1(){
                globalCount=document.getElementById("text1").value.length+document.getElementById("text2").value.length+document.getElementById("text3").value.length+document.getElementById("text4").value.length
                if(globalCount>=400){
                alert("max word count reached");
                //do what needs to be done 
                }

        }

        </script>
        <body>
          <textarea name="t1" id="text1" cols="30" rows="10"  onkeyup="fun1()"></textarea>
          <textarea name="t2" id="text2" cols="30" rows="10"  onkeyup="fun1()"></textarea>
          <textarea name="t3" id="text3" cols="30" rows="10"  onkeyup="fun1()"></textarea>
          <textarea name="t4" id="text4" cols="30" rows="10" onkeyup="fun1()"></textarea>
             </body>
    </html>

Upvotes: 0

Related Questions