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

我需要控制一个文本区域，包含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>

函数get_textvalue（）{
var ad=$（“#mytextarea”）；
var ad_words=ad.val（）.split（''）.length；
var ad_length=ad.val（）.length；
//帕拉布拉斯康塔多酒店
$（“span#words_counting”）。文本（ad#u words）；
if（ad_words==20）{
$（“字数计算”）.css（“颜色”、“红色”）；
}
如果（广告长度>=180）{
$（“div#ad#u警告”）.slideDown（）；
}
}
函数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（）.子字符串（0，ad_长度）；
$（“#mytextarea”）.val（新广告）；
}
$（“#avis#u vendor_id”）.html（广告文本）；
}

就代码而言，似乎您已经掌握了基本的部分（即计算单词等）。我建议您注册该控件上的“输入”事件，然后执行检查。如果用户有太多的单词，您可以将字符串修剪回所需的内容和/或更新UI以反映错误情况。

就代码而言，您似乎拥有基本的片段（即，计算单词等）。我建议您注册该控件上的“输入”事件，然后执行检查。如果用户有太多的单词，您可以将字符串修剪回所需的内容和/或更新UI以反映错误情况。

此函数计算单词数

  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更改时调用该函数

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

---

此函数计算字数

  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更改时调用该函数

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

---

首先，您缺少textarea end标记

你想要什么？当你达到字数限制时停止写作

如果您这样做，您可以这样做：

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

---

首先，你缺少了textarea的end标签

你想要什么？当你达到字数限制时停止写作

如果您这样做，您可以这样做：

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

---

下面是一个正在运行的JSFIDE：

---

您可以使用jQuery非常轻松地完成这项工作您必须按名称而不是id访问文本区域。

为

元素指定一个名称：

并使用选择器

$（'textarea[name=mytextarea]'）访问它。

---

下面是一个正在运行的JSFIDE：

---

您可以使用jQuery非常轻松地完成这项工作您必须按名称而不是id访问文本区域。

为

元素指定一个名称：

并使用选择器

$（'textarea[name=mytextarea]'）访问它。

---

如果文本超过20个字，我必须截断文本区域。使用您拥有的代码，识别响应的前20个单词应该非常容易。然后，每次触发

input

事件时，您可以用这20个单词替换textarea的内容。如果文本超过20个单词，我必须截断textarea。使用您拥有的代码，识别响应的前20个单词应该非常容易。然后，每次

输入事件触发时，您可以将文本区域的内容替换为这20个单词。您现在正在计算单词数（对于“单词”的某些定义），但不尝试使用结果，只是一个友好的提示，提示您向上投票和“接受”（绿色复选标记）如果您对答案感到满意，您现在正在计算单词数（对于“单词”的某些定义），但不尝试使用结果。如果您对答案感到满意，您只需友好地提醒您投票并“接受”（绿色复选标记）答案。