计数和限制textarea中的单词 [英] Counting and limiting words in a textarea

问题描述

我设法让这个小jquery函数计算在textarea字段中输入的单词数量。

这里是小提琴

这里是代码：

JQUERY：

  $（document）.ready（function（）
 {
 var wordCounts = {}; 
 $（＃word_count）。keyup（function（）{
 var matches = this.value.match（/ \b / g）; 
 wordCounts [this .id] = matches？matches.length / 2：0; 
 var finalCount = 0; 
 $ .each（wordCounts，function（k，v）{
 finalCount + = v; $ 
'）; 
 $（'＃display_count'）。html（finalCount）; 
 am_cal（finalCount）; 
}）.keyup（）; 
}）; 
  

这里是html代码

 < textarea name =txtScriptid =word_countcols =1rows =1>< / textarea> 
总字数：< span id =display_count> 0< / span>话。 
  

如何在其中进行修改以获得像这样的输出

总字数：0字。剩下的词：200

当它达到200个单词时，它不应该允许在jquery中粘贴或在textarea字段中输入更多单词？即它应限制用户输入不超过200个单词。

请帮助。

谢谢

编辑：修改仅在此代码中需要，因为我非常了解插件，但它们可能会干扰主代码。

/ p>

解决方案使用返回false 来停止 keyup 事件不会阻止事件，因为在这种情况下事件已经被触发。当用户释放一个键时， 该键的默认操作被执行，键入事件触发。

您需要以编程方式编辑 textarea 的值，您的值为 #wordcount ：

  $（document）.ready（function（）{
 $（ （'keyup'，function（）{
 var words = this.value.match（/ \ S + / g）.length; 
 
 if（words> #word_count ; 200）{
 //将字符串分成前200个单词并重新加入空格
 var trimmed = $（this）.val（）。split（/ \ s + /，200）.join（ ）; 
 //在结尾添加空格以确保更多的输入创建新单词
 $（this）.val（trimmed +）; 
} 
其他{
 $（'＃display_count'）。text（words）; 
 $（'＃word_left'）。text（200-words）; 
} 
}）; 
}）; 
  

http： //jsfiddle.net/7DT5z/9/

I managed to make this little jquery function to count the number of words entered in textarea field.

here is the fiddle

and here is the code:

JQUERY:

$(document).ready(function()
{
var wordCounts = {};
$("#word_count").keyup(function() {
    var matches = this.value.match(/\b/g);
    wordCounts[this.id] = matches ? matches.length / 2 : 0;
    var finalCount = 0;
    $.each(wordCounts, function(k, v) {
        finalCount += v;
    });
    $('#display_count').html(finalCount);
    am_cal(finalCount);
}).keyup();
}); 

and here is html code

<textarea name="txtScript" id="word_count" cols="1" rows="1"></textarea>
Total word Count : <span id="display_count">0</span> words.

how can i make modifications in it to have the output like this

Total word Count : 0 words. Words left : 200

and when it reach 200 words it shall not allow to either paste, or type more words in the textarea field, in jquery? i.e. it shall restrict user to type exactly 200 words not more than that.

Please help.

Thanks a lot in advance.

EDIT: The modification is needed in this code only, as i am very well aware of the plugins, but they may interfere with the main code.

解决方案

Using return false to stop keyup events doesn't block the event, because in this case the event has already fired. The keyup event fires when the user releases a key, after the default action of that key has been performed.

You will need to programmatically edit the value of the textarea you have as #wordcount:

$(document).ready(function() {
  $("#word_count").on('keyup', function() {
    var words = this.value.match(/\S+/g).length;

    if (words > 200) {
      // Split the string on first 200 words and rejoin on spaces
      var trimmed = $(this).val().split(/\s+/, 200).join(" ");
      // Add a space at the end to make sure more typing creates new words
      $(this).val(trimmed + " ");
    }
    else {
      $('#display_count').text(words);
      $('#word_left').text(200-words);
    }
  });
}); 

http://jsfiddle.net/7DT5z/9/

这篇关于计数和限制textarea中的单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！