Question

我需要控制一个包含2个子句，200个字符和最多20个字的textarea。

我在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

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

Answer 2

此功能对单词进行计数。

  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>

Answer 3

嗯，首先，你错过了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");
}

Answer 4

这里有一个实际的jsFiddle：http://jsfiddle.net/cyrusaf/79StL/3/

您可以使用jQuery轻松完成此操作。 您必须按名称访问textarea而不是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);
});

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

4 个答案: