如何做JavaScript来计算剩余字数在4个textarea字段的组合上有多少

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

试着这么做

$(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 2

这个人是不是很辛苦，你就必须让你有充分的文本区域计数。为了便于使用，我假设页面上只有四个文本区域，否则可以使用类选择器。这是对我工作：

$('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循环运行其中的al，并在本地范围内没有函数）。现在使用的单词数量是所有文本字段的组合，并且一旦您击中了多个单词，就可以禁用所有这些单词。

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/