如何做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/