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

How can I limit words, not characters, in textarea HTML

本文关键字：单词 字符 textarea HTML      更新时间：2023-09-26

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

该函数对单词进行计数。

  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>

就代码而言，您似乎已经具备了基本的部分(即，计算单词等)。我建议您注册该控件上的"input"事件，然后执行检查。如果用户有太多的单词，您可以将字符串缩减到所需的内容和/或更新UI以反映错误情况。

首先，你缺少textarea结束标签。

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

你可以这样做:

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

这是一个jsFiddle在行动:http://jsfiddle.net/cyrusaf/79StL/3/

你可以使用jQuery很容易地做到这一点。必须通过名称访问文本区域，而不是通过id。

给<textarea>元素一个名称:<textarea name="mytextarea"></textarea>

使用选择器$('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);
});
相关文章：