javascript保留多个textarea单词

Question

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

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

情况如下：

我有一个包含5个字段的文本框的页面。 考虑到第一个单词的单词数有限制，另外四个单词的单词数也有限制。 我需要向用户显示他对于第一个文本框和其他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

更新

好的，我可能对此有些过分，但这是一个新的小提琴： 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

它计算文本区域中的单词数，并通过粘贴和键入来删除多余的一项

$('#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"));
    });

DEMO