如何在textarea HTML中限制单词而不是字符

Question

I need to control a textarea with 2 clauses, 200 characters and 20 words at most.

I solved the 200 character limit with a maxlength in the HTML, but I don't know how to limit the text by words.

The code is the following:

<textarea onkeydown="get_textvalue();" onkeyup="ad_writer();" id="mytextarea" name="mytextarea" maxlength="200">

<script>

    function get_textvalue(){

        var ad = $("#mytextarea");

        var ad_words  = ad.val().split(' ').length;
        var ad_length = ad.val().length;

        // Contador de palabras
        $("span#words_counting").text(ad_words);

        if(ad_words == 20){
            $("span#words_counting").css("color", "red");
        }

        if(ad_length >= 180){
            $("div#ad_warning").slideDown();
        }

    }

    function ad_writer(){

        var ad = $("#mytextarea");

        var ad_text   = ad.val();
        var ad_words  = ad_text.split(' ').length;
        var ad_length = ad_text.length;

        if(ad_words == 20){

            var new_ad = ad.val().substring(0,ad_length);
            $("#mytextarea").val(new_ad);

        }

        $("#avis_vendor_id").html(ad_text);

    }

</script>

Answer 1

It seems like you have the basic pieces so far as code is concerned (ie, counting words, etc.). I'd recommend you register for the 'input' event on that control, and perform your check then. If the user has too many words, you can trim back the string to the desired content and/or update the UI to reflect the error condition.

Answer 2

This function counts the words.

  var wordLen = 255; // Maximum word length
         function checkWordLen(obj){
          var len = obj.value.split(/[\s]+/);
           if(len.length > wordLen){
               alert("You cannot put more than "+wordLen+" words in this text area.");
               obj.oldValue = obj.value!=obj.oldValue?obj.value:obj.oldValue;
               obj.value = obj.oldValue?obj.oldValue:"";
               return false;
           }
         return true;
       }

Then just need to call that function every time that textarea changes.

<textarea rows="15" cols="30" name="t1" onchange="checkWordLen(this);"></textarea>

Answer 3

Well, first of all you're missing the textarea end tag.

And what do you want? To stop writing when you reached the words limit?

You can do that if you do this:

if(ad_words >= 20){
  var words=ad.val().split(' ');
  var words20=words.slice(0,20).join(" ");
  $("#mytextarea").val(words20);
  $("span#words_counting").css("color", "red");
}

Answer 4

Here's a jsFiddle of it in action: http://jsfiddle.net/cyrusaf/79StL/3/

---

You can use jQuery to do this very easily. You must access the textarea by name not by id.

Give the <textarea> element a name: <textarea name="mytextarea"></textarea>

And access it by using the selector $('textarea[name=mytextarea]')

// On textarea change
$('textarea[name=mytextarea]').keyup(function(){
    // Get value of textarea
    var str = $('textarea[name=mytextarea]').val();
    // Check if value has more than 20 words
    if (str.split(' ').length > 20) {
        // Create string with first 20 words
        var str_new = str.split(' ').splice(0, 20).join(' ');
        // Overwrite the content with the first 20 words
        $('textarea[name=mytextarea]').val(str_new);
});