Limit length of textarea in Words using Javascript?

Question

I have the following bind on keyup which alerts if they go over 150 characters, but you can just press okay and keep typing and then just keep pressing okay.

I want to crop them at 150 words (not characters) and if they type over it, remove the extras. But I can't seem to figure out how to do it, I can figure out characters. But not words.

jQuery('textarea').keyup(function() {
      var $this, wordcount;
      $this = $(this);
      wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
      if (wordcount > 150) {
        jQuery(".word_count span").text("150");
        return alert("You've reached the maximum allowed words.");
      } else {
        return jQuery(".word_count span").text(wordcount);
      }
    });

Do not rely on keyup/down alone. Also consider the case of the user doing a right-click -> paste or text drag and drop etc. Google for "jQuery textchanged event" and you will find whats needed. — techfoobar
– techfoobar, Commented Oct 1, 2012 at 15:42
So what should I rely on? Right click paste triggers a key up... and I have no idea what text drag drop is. — Steven
– Steven, Commented Oct 1, 2012 at 15:44
Correction, testing on Windows IE cut/paste didn't trigger key up. I'll change it to zurb.com/playground/jquery-text-change-custom-event — Steven
– Steven, Commented Oct 1, 2012 at 15:47
If I were to reach the limit you impose I_would_just_start_not_using_spaces_And_I_will_get_my_say_in_no_propblem — Elias Van Ootegem
– Elias Van Ootegem, Commented Oct 1, 2012 at 15:49
Elias, yah I know there are problems with it which is why I am not relying 100% on javascript, there is server side too. But I still want to crop it at X words and it has to be possible with javascript. — Steven
– Steven, Commented Oct 1, 2012 at 15:50

Shahrokhian · Accepted Answer · 2012-10-01 16:09:36Z

9

/**
 * jQuery.textareaCounter
 * Version 1.0
 * Copyright (c) 2011 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 10/20/2011
**/
(function($){
    $.fn.textareaCounter = function(options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var defaults = {
            limit: 100
        };  
        var options = $.extend(defaults, options);

        // and the plugin begins
        return this.each(function() {
            var obj, text, wordcount, limited;

            obj = $(this);
            obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. '+options.limit+' words</span>');

            obj.keyup(function() {
                text = obj.val();
                if(text === "") {
                    wordcount = 0;
                } else {
                    wordcount = $.trim(text).split(" ").length;
                }
                if(wordcount > options.limit) {
                    $("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
                    limited = $.trim(text).split(" ", options.limit);
                    limited = limited.join(" ");
                    $(this).val(limited);
                } else {
                    $("#counter-text").html((options.limit - wordcount)+' words left');
                } 
            });
        });
    };
})(jQuery);

Load that up and then you can use the following to make it work:

$("textarea").textareaCounter({ limit: 100 });

http://bavotasan.com/2011/simple-textarea-word-counter-jquery-plugin/

answered Oct 1, 2012 at 16:09

Shahrokhian

1,11413 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steven Over a year ago

Not sure why this was voted down, but this seems to be the only one that actually worked.

Dards Over a year ago

Thanks, this works for me, but need to add unique id for every label of word count when used on multiple textarea element e.g. cntid=obj.attr('id')+"-counter_label", this will get the id of each textarea and use to define id of the counter label.

JJJ · Accepted Answer · 2013-04-27 15:24:06Z

5

If you want to prevent the typing itself (when count > 150) you can do as following:

Use keypress instead of keyup
Instead of return alert() first do an alert() and then return false;

You may also want to add change (or blur) event handler to handle text pasting.

var maxWords = 150;
jQuery('textarea').keypress(function() {
    var $this, wordcount;
    $this = $(this);
    wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
    if (wordcount > maxWords) {
        jQuery(".word_count span").text("" + maxWords);
        alert("You've reached the maximum allowed words.");
        return false;
    } else {
        return jQuery(".word_count span").text(wordcount);
    }
});

jQuery('textarea').change(function() {
    var words = $(this).val().split(/\b[\s,\.-:;]*/);
    if (words.length > maxWords) {
        words.splice(maxWords);
        $(this).val(words.join(""));
        alert("You've reached the maximum allowed words. Extra words removed.");
    }
});

Fiddle here

edited Apr 27, 2013 at 15:24

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

answered Oct 1, 2012 at 16:19

prashanth

2,10912 silver badges13 bronze badges

2 Comments

Steven Over a year ago

The first one works the second one doesn't work. If you change it to bind on paste the extra words are removed but so are all the spaces.

Steven Over a year ago

I'm going to give you the accepted question because the first example solves my problem. The second example does not work as it should though, just a note for others.

Community · Accepted Answer · 2017-05-23 11:46:55Z

1

Check jQuery: Count words in real time and this example: http://jsfiddle.net/gilly3/YJVPZ/1/

Then, if you want to cut the extra words... you could do something like:

var maxWords = 10;
if(finalCount > maxWords){
    $("#a").val(a.value.slice(0,-2)); // the -2 is to remove the extra space at the end
};

Here is a working example http://jsfiddle.net/YJVPZ/80/

Hope it helps, Good Luck!

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Oct 1, 2012 at 16:11

gmo

9,0503 gold badges42 silver badges52 bronze badges

2 Comments

Steven Over a year ago

If you keep trying to type it adds parts of the word and continues on typing. So basically doesn't work.

gmo Over a year ago

¿?... can't reproduce the issue you mention, not in CR, FF or IE. If I continue typing, the script delete the extra word and trailing space... Maybe you say that if you continue typing right next to the last word, adds and put all letters together. If this is what you saying, that's normal, is because is considerer as a one word. Anyway... doesn't matter.

Travesty3 · Accepted Answer · 2012-10-01 15:55:50Z

0

Try this function. The value argument should be your textarea value.

jQuery('textarea').val();


function wordcount(value)
{
    value = value.replace(/\s+/g," ");
    var andchr = value.split(" & ").length - 1;
    var char_count = value.length;
    var fullStr = value + " ";                      

    //word count for regional language
    v = value.split(' ');
    var word_count1 = v.length;                         
    var cheArr = Array('@','.','"',"'",'_','-','+','=',';','&','*','\(','\)','{','}','[','}','|','\\','\,','/');                            
    for(i=0; i<=cheArr.length; i++)
    {
        word_count1 = word_count1 + value.split(cheArr[i]).length - 1;
    } 

    //word count for all languages
    var initial_whitespace_rExp = /^[^A-Za-z0-9]+/gi;
    var left_trimmedStr = fullStr.replace(initial_whitespace_rExp, "");                     
    var non_alphanumerics_rExp = rExp = /[^A-Za-z0-9]+/gi;

    var cleanedStr = left_trimmedStr.replace(non_alphanumerics_rExp, " ");                      
    var splitString = cleanedStr.split(" ");                        
    var word_count = (splitString.length - 1) + andchr;                          
    if(word_count1 > word_count)
    {
        word_count = word_count1;
    }                       
    if(value == '' || value == null || typeof(value) == 'undefined'){
        word_count = 0;
    }

    alert(word_count);

}

edited Oct 1, 2012 at 15:55

Travesty3

14.5k7 gold badges64 silver badges103 bronze badges

answered Oct 1, 2012 at 15:51

webCoder

2,2321 gold badge17 silver badges29 bronze badges

1 Comment

Steven Over a year ago

This had the same problem that my original code had (didn't crop extra characters)

kannanrbk · Accepted Answer · 2012-10-01 16:04:43Z

0

$("textarea").keyup(function(){
         var obj = $(this);
         var maxLen = 150;
         var val = obj.val();
         var chars = val.length;
         if(chars > maxLen){
              obj.val(val.substring(0,maxLen));
         }
});

answered Oct 1, 2012 at 16:04

kannanrbk

7,17413 gold badges58 silver badges97 bronze badges

1 Comment

Steven Over a year ago

Crops at 150 characters, not 150 words.

Stefan P. · Accepted Answer · 2012-10-01 15:49:44Z

-1

Register to these events:

$('textarea').on('paste cut keydown', function(){...});

answered Oct 1, 2012 at 15:49

Stefan P.

9,5296 gold badges32 silver badges43 bronze badges

Collectives™ on Stack Overflow

Limit length of textarea in Words using Javascript?

6 Answers 6

2 Comments

2 Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related