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

Question

我对 4 个文本区域的字数限制为 300 个字，即 4 个文本区域的字数总计不应超过 300 个。我怎样才能实现这一点，尽管我已经阅读了很多关于此的文章，这些文章仅显示在单个文本区域上。

Answer 1

我想这将是一个选择。只需将 limit 更改为您想要的需求，例如 300。出于测试目的，我将其保留为 3。好处是，这样我们就不会禁用 keyup 事件处理程序，如果超过 limit，单词就会被 textarea chop :将 substr 与当前 value.length -1 结合使用。因此，例如，如果我在第一个 textarea 中输入 3 个单词并且达到限制，我仍然可以从第一个 textarea 中删除一个单词并将其输入到第二个 >textarea，如果我们在达到 limit 后返回 false，这是不可能的。为了检测复制/粘贴操作，我添加了 paste 监听器，并检查我们是否已达到忽略粘贴比实际单词限制更多的单词的限制。但即使跨文本区域，粘贴仍然是可能的。

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