Zliczanie i ograniczanie słów w textarea

Question

Udało mi się zrobić tę małą funkcję jquery, aby policzyć liczbę słów wprowadzonych w polu textarea.

here is the fiddle

i oto kod:

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(); 
}); 

i tu jest kod html

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

jaki sposób można dokonać modyfikacji w nim mieć wyjście takie jak to

Łączna liczba słów: 0 słów. Pozostało słów: 200

, a gdy osiągnie 200 słów, nie pozwala na wklejenie, lub wpisać więcej słów w polu tekstowym, w jquery? tj. ogranicza użytkownika do wpisania dokładnie 200 słów nie więcej niż.

Proszę o pomoc.

Dziękuję bardzo z góry.

EDYCJA: Modyfikacja jest wymagana tylko w tym kodzie, ponieważ doskonale znam wtyczki, ale mogą one zakłócać główny kod.

Answer 1

Korzystanie return false zatrzymać keyup zdarzenia nie blokuje to wydarzenie, ponieważ w tym przypadku zdarzenie już zwolniony. Zdarzenie keyup jest wywoływane, gdy użytkownik zwolni klucz,, domyślna akcja tego klucza została wykonana.

Trzeba programowo edytować wartość textarea masz jak #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/

Answer 2

Prosty plugin można znaleźć tutaj:

Simple Textarea Word Counter using jQuery

Answer 3

Dodawanie prosty if condition rozwiąże Twój problem.

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

Answer 4

Zrobiłbym to w ten sposób?

$("#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

$ (document) .ready (function() { $ ("textarea") .W ('keyUp', funkcja() {

   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

Można użyć dodatnich wyrażeń regularnych z wyprzedzeniem, aby zachować białe znaki - tak, aby kody powrotu i karty nie były zwinięte na pojedynczym spacji.Coś takiego:

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>