Question

我在整个4 textareas上有300字的单词限制，即4 textareas的单词数不应超过300整体。我怎么能实现这一点，虽然我已经阅读了很多关于这个的文章，这些文章仅在单个textarea上显示。

Answer 1

更新：字数，而不是字数！

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


要么我必须禁用复制粘贴。（功能损失）

或者我应该在粘贴后修剪文本。（数据丢失）

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

＆＃13;

$(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;
  });
});

＆＃13;

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

＆＃13;

Answer 2

我想这是一个选择。只需将limit更改为您想要的需求，例如 300 。我把它留在 3 进行测试。好的方法是，这样我们就不会禁用keyup事件处理程序，如果我们超过limit使用当前使用textarea切断substr的字词value.length -1。例如，如果我在第一个textarea中键入3个单词并达到限制，我仍然可以删除第一个textarea中的一个单词并将其输入到第二个textarea中如果我们return false达到limit后无法实现。为了检测复制/粘贴操作，我添加了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 3

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

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

检查以下示例

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

如何限制跨多个textareas的单词数量？

3 个答案: