Question

我有一种情况，我必须限制用户在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，我现在很有钱。

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

Answer 1

这个不是很难，你只需要为你拥有的每个文本区域计算。为了便于使用，我假设四个文本区域是页面上唯一的区域，但您可以使用类选择器。这对我有用：

$('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循环并在本地范围内没有函数来运行它们。）。现在使用的单词数量是所有文本字段的组合，一旦你达到很多单词就可以禁用所有单词。

Answer 2

尝试类似

的内容

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

请参阅小提琴 - 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;
            }
        });

上述代码并非完全傻瓜，但可以防止出现明显的错误。

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

更新了小提琴：http://jsfiddle.net/2b6agtt9/2/

Answer 3

你可以尝试这个，更简单：）

var limit = 300;
$("textarea").on('keydown',function(e){
    var count=0;

    $("textarea").each(function(index,elem){     
        count += $(elem).val().length;
    })

    if (count>= limit) 
    {
        e.preventDefault();
        e.stopPropagation();
    }

    $('#ExtraWords').html(limit - count);
})

http://jsfiddle.net/waayh7xu/7/

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

3 个答案: