如何使用JavaScript计算4个textarea字段组合中剩余的单词数

我这里有一个情况，我必须限制用户在4个textarea字段的组合上只键入300个字符。例如，如果他在第一个屏幕上键入300，那么他就不能在第二个屏幕上键入其他内容，或者他也可以在每个屏幕上键入75个单词

我正在尝试制作一个JS来计算剩余的单词，并且当剩余的单词变成0时，将字段限制为不接受更多的单词

有人能帮忙吗？如果它是这种结构的延续，那就太好了

<textarea id="MyTextBox1" class="MyTextBox" cols="60" rows="8"></textarea>
<textarea id="MyTextBox2" class="MyTextBox" cols="60" rows="8"></textarea>
<textarea id="MyTextBox3" class="MyTextBox" cols="60" rows="8"></textarea>
<textarea id="MyTextBox4" class="MyTextBox" cols="60" rows="8"></textarea>

<p><span id="remainingWords"></span> Words Remaining</p>

剩下的话

我设法得到了一个工作样本，但第一个文本区只有一个，我现在有点库存

---

这并不难，你只需要不断计算你拥有的每个文本区域。为了便于使用，我；我假设这四个文本区域是页面上唯一的区域，但如果不是这样，您可以使用类选择器。这就是我的工作原理：

$('textarea').live("keyup", function (e) {
    var WordsUsed = 0;
    function countWords(textarea){
        // be sure to check if theres a value, as split.length will return 1 if it didn't split anywhere.
        return textarea.val() != ""
            ? textarea.val().trim().split(' ').length
            : 0;
    }
    WordsUsed += countWords( $('#MyTextBox1'));
    WordsUsed += countWords( $('#MyTextBox2'));
    WordsUsed += countWords( $('#MyTextBox3'));
    WordsUsed += countWords( $('#MyTextBox4'));
    // do the rest of your code here - I'm not going to repeat it but it works
});

---

我使用了一个名为countWords的临时函数-我在本地上下文中使用了它，但在全局上下文中也很有用。然后我运行了所有的文本区域（您也可以使用for循环运行所有文本区域，并且在本地范围内没有函数）。现在，使用的字数是所有文本字段的组合，您可以在点击多个字数后禁用所有这些字段。

您可以尝试使用这个，更简单：）

试试类似的方法

$(document).ready(function () {
        $('.MyTextBox').live("keyup", function (e) {
            var v = "";
            $('.MyTextBox').each(function() { v = v + " " + $(this).val().trim(); }
            var WordsUsed = v.replace(regex, ' ').split(' ').length;
            WordsRemaining = parseInt(WordsLimit) - parseInt(WordsUsed);
            if (WordsUsed == WordsLimit) {
                $('#remainingWords').html("0 Words remaining.");
                $('#ExtraWords').html("");
            }
            else if (WordsUsed > WordsLimit) {
                $('#remainingWords').html("0");
                var extraWord = parseInt(WordsUsed) - parseInt(WordsLimit);
                $('#ExtraWords').html("You have entered " + extraWord + " extra Words!!");
            } else {
                $('#remainingWords').html(WordsRemaining);
            }
        });
    });

以上内容将用于所有

.MyTextBox

类元素，并计算每个类中使用的单词数。它还可以很好地跟踪使用现有代码的总量

见小提琴-

为了回应OP的评论，我添加了一些额外的代码，试图在限制后阻止额外文本的输入。原始代码试图使文本框为只读，但这当然会阻止编辑。因此，我提出了一个基于按键的解决方案

要防止限制后出现额外的单词，请尝试以下操作

        $('.MyTextBox').live("keydown", function (e) {
            console.log(e);
            if (WordsRemaining == 0) {
                // Allow all characters except space
                if (e.keyCode == 32) return false;
            } else if (WordsRemaining < 0) {
                if (e.keyCode > 46 || e.keyCode == 32) return false;
            }
        });

$（'.MyTextBox'）.live（“向下键”，函数（e）{
控制台日志（e）；
if（WordsRemaining==0）{
//允许除空格外的所有字符
如果（e.keyCode==32）返回false；
}else if（字保留<0）{
如果（e.keyCode>46 | | e.keyCode==32）返回false；
}
});

上面的代码不是完全防错的，但可以防止明显的错误

当达到字数限制时，它将阻止添加额外的单词，用户可以根据需要编辑现有单词。如果以某种方式规避了字数限制（可能是通过粘贴大量文本），那么它将阻止添加额外的文本，同时允许编辑和突出显示额外的字数

---

更新的fiddle位于：

您的脚本正在计算字符而不是单词。通过将其与我在回答中提到的内容相结合，可以轻松地进行修改，否则这也非常优雅。这一个很好，但它违背了我没有列出的要求。页面上还有另一个文本区域不应该包含在这里，所以我想我们必须坚持使用类的计划。您认为如何？您可以轻松地将

$（'textarea'）

替换为

$（'textarea.Class'）

或

$（'.textareaClass'）

之类的内容，然后它将仅适用于具有该类的文本区域。然后甚至可以替换四个

WordsUsed+=countWords（$（“#MyTextBox1”）：
$（'textarea.Class'）。每个（函数（）{WordsUsed+=countWords（$（this））；}）-这将删除代码的重复。（另外，我在我的帖子顶部提到了这一点，但这澄清了一点）在玩了一点之后，我注意到它没有将单词限制在限制数字，而是在计数达到0后继续添加单词。有什么想法吗？@ViniciusSantana我用一个示例更新了代码，说明了如何防止文本超出限制。您可以进一步修改此代码以满足您的需要。
        $('.MyTextBox').live("keydown", function (e) {
            console.log(e);
            if (WordsRemaining == 0) {
                // Allow all characters except space
                if (e.keyCode == 32) return false;
            } else if (WordsRemaining < 0) {
                if (e.keyCode > 46 || e.keyCode == 32) return false;
            }
        });