Display word count while user is typing message and limit the word length to 300 words

Question

How do I limit the short messages to 300 words and display the word count on top of the message box? The number on top of the message box doesn't seem to be decreasing when I try to type in something.

Javascript:

<script type="text/javascript" language="javascript"> 
var content;
$('textarea').on('keyup', function(){
    var words = $(this).val().split(" ").length;
    $('#myWordCount').text("("+(300-words)+" words left)");
    if(words>=300){
        $(this).val(content);
        alert('no more than 300 words, please!');
    } else {    
        content = $(this).val();
    }
});
</script>

Message Form:

    <form action="read_message.php" method="post"> 
 <table class="form_table"> 
  <tr> 
    <td style="font-weight:bold;">Subject:</td> 
    <td><input style=" width:300px" name="form_subject"/></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td style="font-weight:bold;">Message:</td> 
    <td id="myWordCount">300 words left</td> 
    <td></td> 
  </tr> 
  <tr> 
    <td><input type="hidden" name="sender_id" value="<?php echo $sender_id?>"></td> 
    <td><textarea cols="50" rows="4" name="form_message"></textarea></td> 
    <td valign="bottom"><input type="submit" name="submit_message" value="send"></td> 
  </tr> 
 </table> 
</form> 

Answer 1

To limit the number of letters used try something like this:

var content;
$('textarea').on('keyup', function(){
    var letters = $(this).val().length;
    $('#myLetterCount').text(301-letters+" letters left");
    // limit message
    if(letters>=301){
        $(this).val(content);
        alert('no more than 300 letters, please!');
    } else {    
        content = $(this).val();
    }
});

to count the words use the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var content;
    $('textarea').on('keyup', function(){
        // count words by whitespace
        var words = $(this).val().split(/\s+/).length;
        $('#myWordCount').text(301-words+" words left");
        // limit message
        if(words>=301){
            $(this).val(content);
            alert('no more than 300 words, please!');
        } else {    
            content = $(this).val();
        }
    });
});
</script>

demo: http://jsfiddle.net/NVSN7/6/

Answer 2

so, this uses a regex to get word boundaries. alter the regex to change what it considers a 'word'. on keypress, the word count is updated as applicable and sets the text.

$(function(){
  var wordcount = /\b/g;

  $('form').on({'keypress':function(event){
    var wordArray = $(this).val().match(wordcount);
   $("#wordcount").text(wordArray?event.data.max - wordArray.length /2:event.data.max);
  }},'textarea',{max:300});
});

Answer 3

I agree with some commenters that limiting characters may be more useful to do. However, you can definitely count words, depending on how you define a "word":

function countWords(str) {
    return str.split(/\s+/).length;
}

$('textarea[name="form_message"]').on('keyup', function () {
    var words = countWords($(this).val());
    $('#myWordCount').text(300 - words + ' words left');
}

If you want to count letters instead, you can just take out .split(/\s+/) above and it should work.

Answer 4

Try this... http://www.jamesfairhurst.co.uk/posts/view/jquery_word_character_counter

Answer 5

try this one: i use js here.

function countWord()
{
    var str = document.getElementById("myTextarea").value;
    var subStr = str.split(" ");

    if(subStr.length == 301)
    {
        document.getElementById("myTextarea").value = str.slice(0, -1);
        alert("Limit Reached!");
        return false;
    }
}

<textarea id="myTextarea" onkeypress="return countWord();" style="width:300px; height:200px;"></textarea>