javascript - 如何使用 JavaScript 计算 4 个文本区域组合中剩余的单词数

Question

我遇到的情况是，我必须限制用户在 4 个文本区域的组合中只能键入 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>

我设法得到了一个工作样本，但只有一个用于第一个文本区域，我现在很喜欢存货。

http://jsfiddle.net/vinicius5581/waayh7xu/2/

Answer 1

尝试类似的东西

$(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 类元素并计算每个元素中使用的单词数。它还可以很好地跟踪使用现有代码的总数。

参见 fiddle - http://jsfiddle.net/2b6agtt9/

为了回应 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;
            }
        });

上面的代码不是完全的万无一失，但是可以防止明显的错误。

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

更新 fiddle :http://jsfiddle.net/2b6agtt9/2/