Limit Word Count of A Textfield in JQuery

Question

I'm modding some jquery code to limit the word count of a textfield but I can't figure out how to get the value. Here's the code:

    <script>

var $limitWords = 20;
var $wordCount = $('#count').val();

    $(document).ready(function(){
      $("#edit-field-message-0-value").keyup(function() {
         $('#count').html($('#edit-field-message-0-value').val().split(/\b[\s,\.-:;]*/).length);

      if ($wordCount > $limitWords) {
      $('#edit-field-message-0-value').addClass('error');
      } else {
      $('#edit-field-message-0-value').addClass('not-error');
      }
      });
    });

</script>

Specifically, what should "$wordCount" be equal to to return the current value?

I think it should be easy, but I can't seem to figure it out.

Any ideas?

Thanks, Scott

Borrow the code from SO's comments ;)

Seb
– Seb

2009-10-16 17:45:17 +00:00
Commented Oct 16, 2009 at 17:45 — Seb
– Seb, Commented Oct 16, 2009 at 17:45

Corey Ballou · Accepted Answer · 2012-12-07 20:56:14Z

3

I don't quite understand the $wordCount variable. I believe you may be trying to do the following:

$("#edit-field-message-0-value").keyup(function() {
    var $this = $(this);
    var wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;

    if (wordcount > $limitWords) {
        $this.addClass('error');
    } else {
        $this.addClass('not-error');
    } 
});

I am also going to presume you wanted to store the current count:

$("#edit-field-message-0-value").keyup(function() {
    var $this = $(this);
    var wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
    if (wordcount > $limitWords) {
        $('#count').html($limitWords);
        $this.addClass('error');
    } else {
        $('#count').html(wordcount);
        $this.addClass('not-error');
    } 
});

edited Dec 7, 2012 at 20:56

answered Oct 16, 2009 at 17:45

Corey Ballou

43.7k8 gold badges66 silver badges77 bronze badges

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

2 Comments

skhot Over a year ago

I can't mark both your answer and Russ Cam's answer but thanks for point this out for me. Basically, I needed to create an event handler to define the wordcount variable.

None Over a year ago

Here space is taken as a word.and hence alter the idea of word count

Garry · Accepted Answer · 2012-10-26 16:03:50Z

2

This is just expanding on the above, great answer from Pritam, I found it behaved quite oddly and changed

var wordcount = $this.val().split(/\b[\s,.-:;]*/).length - 1;

To:

var wordcount = jQuery.trim($this.val()).split(/\b[\s,.-:;]*/).length;

This sorts the quirky wordcount behaviour (if you're displaying the value back to the user for feedback)

answered Oct 26, 2012 at 16:03

Garry

211 bronze badge

Comments

dialogik · Accepted Answer · 2014-07-05 17:50:38Z

2

The following script won't let you enter more than limitWord:

var limitWord = 20;
var maxchars = 0;
$("#edit-field-message-0-value").keyup(function() {
   $this = $(this);
   var wordcount = $this.val().split(/\b[\s,\.-:;]*/).length - 1;
   if (wordcount < limitWord) {
      chars = $this.val().length;
    }
   else{
    var text = $(this).val();
    var new_text = text.substr(0,chars);
    $(this).val(new_text);
   }
});

edited Jul 5, 2014 at 17:50

dialogik

9,59218 gold badges79 silver badges122 bronze badges

answered Aug 31, 2012 at 12:25

Pritam Prasun

413 bronze badges

Comments

Russ Cam · Accepted Answer · 2009-10-16 17:45:27Z

1

If I've understood you correctly, you need to put the code to get the value inside an event handler for the input/textarea, for example in an event handler foe the keypress event. This way you can restrict the number of words whilst the user is entering text into the input/textarea.

answered Oct 16, 2009 at 17:45

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

1 Comment

skhot Over a year ago

I can't mark both your answer and cballou answer correct but thanks for point this out for me. Basically, I needed to create an event handler to define the wordcount variable - cballou's answer has an example. Makes perfect since. Thanks Russ Cam!

John Fisher · Accepted Answer · 2009-10-16 17:59:16Z

0

Since we don't know what the "#count" element is, I took the queue from the method that sets the value using html(...). So, this should work:

var $wordCount = $('#count').html();

edited Oct 16, 2009 at 17:59

answered Oct 16, 2009 at 17:44

John Fisher

22.8k2 gold badges43 silver badges67 bronze badges

Collectives™ on Stack Overflow

Limit Word Count of A Textfield in JQuery

5 Answers 5

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related