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

【问题标题】：How to limit the amount of words across multiple textareas?如何限制跨多个文本区域的字数？
【发布时间】：2015-09-19 16:20:54
【问题描述】：

我在 4 个文本区域的字数限制为 300 个字，即 4 个文本区域的字数不应超过 300。我怎样才能做到这一点，虽然我已经阅读了很多关于这方面的文章，这些文章只显示在单个 textarea 上。

【问题讨论】：

在单个文本区域中哪种方法最适合您。修改它以适用于多个文本区域可能比创建/搜索新解决方案更容易。
300 个字，还是 300 个字符？

标签： javascript jquery

【解决方案1】：

我猜这将是一个选项。只需将 limit 更改为您想要的需求，例如 300。出于测试目的，我将其保留在 3。好消息是这样我们不会禁用keyup 事件处理程序，如果我们超过limit，则通过将substr 与当前value.length -1 一起使用，单词将被切断textarea。因此，例如，如果我在第一个 textarea 中键入 3 个单词并达到限制，我仍然可以从第一个 textarea 中删除一个单词并将其键入到第二个 textarea 中，如果我们@到达limit 之后的987654330@。为了检测复制/粘贴操作，我添加了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>

【讨论】：

如何检查复制和粘贴计数..??
@Shaan_14 你检查我的答案了吗？
@Praveen Kumar 真的很喜欢您的解决方案，尤其是因为它如此紧凑。不过，您的限制是加了一个字符。
@Praveen：我检查了你的答案，我同意 DavidDomain

【解决方案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>

【讨论】：

你真的应该重新阅读这个问题。他们希望防止 all <textarea> 元素的 combined 字数超过 300。
@Oka 非常感谢。
@PraveenKumar 300 不是 400。;-)
@DavidDomain 更新！
@Praveen: Well Above 计算 textareas 中的字符数。

【解决方案3】：

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

2) 每个文本区域的 Onkeyup 事件递增声明的全局变量并检查当前值。如果小于 400 允许输入 else alert 或按要求执行操作

检查以下示例

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

【讨论】：