javascript - 使用javascript计算多个文本区域剩余字数

Question

我最近在这里发布了一个问题，尽管我得到了很好的答案，但没有解决我的问题，所以我又来了。

原问题:How to do JavaScript to Count how many remaining words are on a combination of 4 textarea fields

情况如下:

我有一个包含 5 个字段文本框的页面。考虑到第一个有字数限制，另外 4 个也有字数限制，但都在一起。我需要向用户显示第一个文本框和其他 4 个文本框还有多少剩余单词。此外，一旦限制达到上限，就不允许用户插入更多单词。

这是迄今为止我所做的最接近的事情。它会计算剩余单词数，但让用户添加额外的单词。我尝试将 MyTextBox 的 attr 更改为只读，但一旦达到限制，我就无法编辑。

请帮忙。 :)

HTML

<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>
<p><span id="ExtraWords" style="font-family: Cambria; font-size: large; color: Red;"></span></p>

JavaScript

    var WordsLimit = 10;
    var WordsUsed = 0;
    var WordsRemaining = 10;
    var regex = /\s+/gi;
    $(document).ready(function () {

        $('.MyTextBox').live("keyup", function (e) {
            var v = "";
            $('.MyTextBox').each(function() { v = v + " " + $(this).val().trim(); });
            v = v.trim();
            console.log(v);
            var WordsUsed = v.replace(regex, ' ').split(' ').length;
            WordsRemaining = parseInt(WordsLimit) - parseInt(WordsUsed);
            if (WordsUsed == WordsLimit) {
                $('.MyTextBox').readOnly = true;
                $('#remainingWords').html("0 Words remaining.");
                $('#ExtraWords').html("");

            }
            else if (WordsUsed > WordsLimit) {
                $('#remainingWords').html("0");
                document.getElementById('MyTextBox1').readOnly = true;
                var extraWord = parseInt(WordsUsed) - parseInt(WordsLimit);
                $('#ExtraWords').html("You have entered " + extraWord + " extra Words!!");
            } else {
                $('#remainingWords').html(WordsRemaining);
            }
        });
    });

http://jsfiddle.net/2b6agtt9/

Answer 1

更新

好吧，我可能有点过分了，但这里有一个新的 fiddle :http://jsfiddle.net/2b6agtt9/10/

看一下。我想这就是你想要的。如何处理最后一个单词的问题有点棘手，但在本例中，它可以是任何内容，只要它没有空格、制表符、回车键、点或逗号即可。如果您愿意，您可以附加更多键码以禁止。如果部分代码不言自明，我很乐意解释。

旧答案如下

您可以阻止除退格键之外的任何其他输入，而不是将文本区域设置为只读:

$('#MyTextBox1').on("keydown", function(e) {
    if (e.keyCode !== 8) {                            
        return false;
    }
});

当达到字数限制时，您应该使用此选项。一旦字数减少，你应该这样做

$('#MyTextBox1').off("keydown");

这里有一个 fiddle 来演示:http://jsfiddle.net/2b6agtt9/8/