如何限制跨多个文本区域的字数？

Question

我的字数限制在4个文本区域上，也就是说，4个文本区域的字数不应该全部超过300个。我怎样才能做到这一点，尽管我已经看过很多关于这方面的文章，这些文章只显示在单个文本区域上。

Answer 1

我想这是个选择。只需将limit更改为您想要的需求，例如300。为了测试目的，我把它留在了3上。好的一点是，这样我们就不会禁用keyup事件处理程序，如果我们超过了limit，就会通过在当前value.length -1中使用substr来切断单词。因此，例如，如果我在第一个textarea中键入3个单词，并且达到了限制，我仍然可以从第一个textarea中删除一个单词并将其键入第二个textarea中，如果我们在达到limit后进行return false，这是不可能的。为了检测复制/粘贴操作，我添加了paste侦听器，并检查是否达到了忽略粘贴比实际单词限制更多的单词的限制。但是，即使在整个textareas中，粘贴仍然是可能的。

​

$(function () {

  var total = 0,
      limit = 3,
      $textArea = $('textarea');

  function addToTotal(collection, pastedWordCount) {
    var wordCount = 0;
    $textArea.each(function(index, element) {
      if (!!element.value.match(/\S+/g)) {
        wordCount += element.value.match(/\S+/g).length;
      }
    });
    if (pastedWordCount !== undefined && pastedWordCount !== 0) {
      wordCount = pastedWordCount;
    }
    return wordCount;
  }

  $textArea.on("keyup", function () {
    total = addToTotal($textArea);
    if (total > limit) {
      this.value = this.value.substr(0, this.value.length -1);
    }
  });

  $textArea.on("paste", function (evt) {
    var pasteDataWordCount = 0;
    if (!!evt.originalEvent.clipboardData.getData('text').match(/\S+/g)) {
      pasteDataWordCount = evt.originalEvent.clipboardData.getData('text').match(/\S+/g).length; 
    }
    total += addToTotal($textArea, pasteDataWordCount);
    if (total > limit) {
      return false;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea name="" id="text1" cols="30" rows="10"></textarea>
<textarea name="" id="text2" cols="30" rows="10"></textarea>
<textarea name="" id="text3" cols="30" rows="10"></textarea>
<textarea name="" id="text4" cols="30" rows="10"></textarea>

​

Answer 2

更新:单词计数，而不是字符计数！

请注意，此代码不检查复制粘贴计数。为此：

1. 要么我必须禁用复制粘贴。(功能损失)
2. 或者我应该在粘贴完后剪掉这段文字。(数据损失)

我不明白为什么这会是个问题。你可以试试这个：

​

$(function () {
  $("textarea").keydown(function () {
    val = 0;
    $("textarea").each(function () {
      if ($(this).val().trim().length > 0)
        val += $(this).val().trim().replace(/\s+/gi, ' ').split(' ').length  ;
    });
    if (val > 300)
      return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea name="" id="text1" cols="30" rows="10"></textarea>
<textarea name="" id="text2" cols="30" rows="10"></textarea>
<textarea name="" id="text3" cols="30" rows="10"></textarea>
<textarea name="" id="text4" cols="30" rows="10"></textarea>

​

Answer 3

1)这可以通过声明一个全局变量来实现，该变量将所有三个文本区域中的单词保持计数。

2)每个文本区域的Onkeyup事件--增加声明的全局变量并检查当前的value.if --允许输入否则警报或按要求执行操作

检查以下示例

            <html>
        <script>
        var globalCount=0;
        function fun1(){
                globalCount=document.getElementById("text1").value.length+document.getElementById("text2").value.length+document.getElementById("text3").value.length+document.getElementById("text4").value.length
                if(globalCount>=400){
                alert("max word count reached");
                //do what needs to be done 
                }

        }

        </script>
        <body>
          <textarea name="t1" id="text1" cols="30" rows="10"  onkeyup="fun1()"></textarea>
          <textarea name="t2" id="text2" cols="30" rows="10"  onkeyup="fun1()"></textarea>
          <textarea name="t3" id="text3" cols="30" rows="10"  onkeyup="fun1()"></textarea>
          <textarea name="t4" id="text4" cols="30" rows="10" onkeyup="fun1()"></textarea>
             </body>
    </html>