如何限制文本区域 HTML 中的单词而不是字符

Question

我需要控制一个包含2个子句、最多200个字符和20个单词的文本区域。

我用 HTML 中的 maxlength 解决了 200 个字符的限制，但我不知道如何按单词限制文本。

代码如下：

<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

该函数对单词进行计数。

  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;
       }

然后只需在每次文本区域发生变化时调用该函数即可。

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