Question

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

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

情况如下：

我有一个包含5个字段文本框的页面。考虑到第一个有多个单词限制，另外4个有限制但都在一起。我需要向用户显示他仍然有多少剩余单词用于第一个文本框和另一个4.还有一个限制丰富时不允许用户插入更多单词。

到目前为止，这是我最接近它的事情。它计算了重复的单词，但让用户添加额外的单词。我尝试将MyTextBox的attr更改为readonly，但是一旦达到限制，我就无法编辑。

请帮忙。：）

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

<强>更新

好吧，我或许对此有点过分了，但这里有一个新的小提琴：http://jsfiddle.net/2b6agtt9/10/

看一看。我想这就是你想要的。如何处理最后一个单词的问题有点棘手，但在这个例子中它可以是任何东西，只要它没有空格，制表符，输入，点或逗号。如果您愿意，可以附加更多密钥代码以禁止使用。我很乐意解释部分代码是否不能自我解释。

旧答案如下

除了使textarea只读，您可以阻止任何其他输入，但退格：

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

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

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

这是一个演示的小提琴：http://jsfiddle.net/2b6agtt9/8/

Answer 2

它计算textarea中的单词数量，并使用paste删除额外的一个单词并输入

$('#remainingWords').html("0");
var extraWord = parseInt(WordsUsed) - parseInt(WordsLimit);
var postBody = $('#MyTextBox1').val().split(' ');
console.log($('#MyTextBox1').val());
for(var i = WordsLimit; i < WordsUsed; i++){
    postBody.pop();
}
$('#MyTextBox1').val(postBody.join(' '));
$('#ExtraWords').html("You have entered " + extraWord + " extra Words!!");

这是小提琴http://jsfiddle.net/2b6agtt9/9/

Answer 3

适合您的插件

JQuery的

jQuery.fn.extend({
    lengthLimit: function(limit,disabled,$label,multipleClassName) {
        this.unbind("keyup.keyupTextLimits");
        this.bind("keyup.keyupTextLimits",function() {
            var allSelector=$("."+multipleClassName).add($(this));
            var otherFieldsLength=0;
            allSelector.not(this).each(function() { 
                otherFieldsLength+=this.value.length;
            });
            var val=$(this).val();    
            var len =val.length+otherFieldsLength;
            if (len > limit) {
                allSelector.each(function(){
                    $(this).val(val.substring(0, limit));
                    if(disabled) $(this).attr('readonly','readonly');
                });
            } else {
                $label.text((limit-len)+" Words Remaining");
            }           
        });
        this.trigger("keyup.keyupTextLimits");
        return this;
    }
    });
    $("#MyTextBox1").lengthLimit(20,true,$("#remainingWords1"));
    $(".diff").lengthLimit(20,true,$("#remainingWords2"),"diff");
    $("#reLimit").click(function(){
       $("#MyTextBox1").lengthLimit(10,true,$("#remainingWords1"));
    });

多个textarea剩余单词用javascript计算

3 个答案:

DEMO