テキストエリアの単語を数えて制限する

Question

私はこの小さなjquery関数を使って、textareaフィールドに入力された単語の数を数えました。

here is the fiddle

、ここのコードです：

の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="txtScript" id="word_count" cols="1" rows="1"></textarea> 
Total word Count : <span id="display_count">0</span> words. 

ですこのような出力は

総件数：0語。左の単語：200

そして200ワードに達すると、それを貼り付けたり、textareaフィールドにもっと多くの単語をjqueryで入力することはできません。すなわち、ユーザは、それ以下の単語を正確に入力するように制限する。

助けてください。

ありがとうございます。

編集：私はプラグインをよく知っているので、このコードでのみ変更が必要ですが、メインコードに干渉する可能性があります。

Answer 1

。 keyupイベントは、ユーザーがキーを解放したときに発生し、の後にのキーアクションが実行された後に発生します。

あなたがプログラム#wordcountとしてtextareaあなたが持っているの値を編集する必要があります

：

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

Answer 2

単純なプラグインは、ここで見つけることができます：

Simple Textarea Word Counter using jQuery

Answer 3

はシンプルif conditionはあなたの問題を解決する追加します。

$.each(wordCounts, function(k, v) { 
    if(finalCount <= 200) { 
     //Todos 
    } 
    else { 
     return false; //prevent keyup event 
    } 
}); 

Answer 4

私はこのようにしますか？この場合には、イベントがすでに解雇されたため、イベントをブロックしませんkeyupイベントを停止するreturn falseを使用し

$("#word_count").on('keydown', function(e) { 
    var words = $.trim(this.value).length ? this.value.match(/\S+/g).length : 0; 
    if (words <= 200) { 
     $('#display_count').text(words); 
     $('#word_left').text(200-words) 
    }else{ 
     if (e.which !== 8) e.preventDefault(); 
    } 
}); 

FIDDLE

Answer 5

$（ドキュメント）.ready（関数（）{ $（ "テキストエリア"） .on（ 'keyUpイベント'、関数（）{

   var value = $('textarea').val(); 
       var wordCount = 0; 

       if(value == ""){ 
        $('textarea').empty(); 
       } 
       else{ 

        var regex = /\s+/gi; 
        var wordCount = value.trim().replace(regex, ' ').split(' ').length; 
       } 

        if(wordCount > 25){ 
        var trimmed = $(this).val().split(/\s+/,25).join(" "); 
        $(this).val(trimmed + " "); 
      } 
      else{ 
       $('#display_count').html(25- wordCount +" words left"); 
      } 


       }); 

}）;

Answer 6

正の先読み正規表現を使用して空白を保持することができます。その結果、戻りコードとタブは1つのスペースに縮小されません。このような何か：

var wordLimit = 5; 
 
    var words = 0; 
 
    var jqContainer = $(".my-container"); 
 
    var jqElt = $(".my-textarea"); 
 

 
function charLimit() 
 
{ 
 
    var words = 0; 
 
    var wordmatch = jqElt.val().match(/[^\s]+\s+/g); 
 
    words = wordmatch?wordmatch.length:0; 
 

 
    if (words > wordLimit) { 
 
     var trimmed = jqElt.val().split(/(?=[^\s]\s+)/, wordLimit).join(""); 
 
     var lastChar = jqElt.val()[trimmed.length]; 
 
     jqElt.val(trimmed + lastChar); 
 
    } 
 
    $('.word-count', jqContainer).text(words); 
 
    $('.words-left', jqContainer).text(Math.max(wordLimit-words, 0)); 
 
} 
 
    
 
jqElt.on("keyup", charLimit); 
 
charLimit();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="my-container"> 
 
    <textarea class="my-textarea"></textarea> 
 
    <span class="words-left"></span> words left 
 
<div>