Zählen und Begrenzen von Wörtern in einem Textfeld

Question

Ich habe es geschafft, diese kleine jquery-Funktion zu machen, um die Anzahl der im Textfeldfeld eingegebenen Wörter zu zählen.

here is the fiddle

und hier ist der 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(); 
}); 

und hier ist HTML-Code

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

wie kann ich darin, Änderungen der haben Ausgabe wie folgt

Gesamtanzahl der Wörter: 0 Wörter. Wörter übrig: 200

und wenn es 200 Wörter erreicht, darf es nicht möglich sein, mehr Wörter in das Textarea-Feld einzufügen oder einzugeben, in jquery? h. es soll den Benutzer darauf beschränken, genau 200 Wörter nicht mehr als das zu tippen.

Bitte helfen.

Vielen Dank im Voraus.

EDIT: Die Änderung wird nur in diesem Code benötigt, da ich die Plugins sehr gut kenne, aber sie können den Hauptcode stören.

Answer 1

return false Mit keyup Ereignisse zu stoppen das Ereignis nicht blockiert, da in diesem Fall das Ereignis bereits gefeuert hat. Das Ereignis keyup wird ausgelöst, wenn der Benutzer einen Schlüssel nach die Standardaktion dieses Schlüssels ausgelöst hat.

Sie müssen programmatisch den Wert der Sie als #wordcount haben textarea bearbeiten:

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

Ein einfaches Plugin kann hier gefunden werden:

Simple Textarea Word Counter using jQuery

Answer 3

ein einfaches if condition Hinzufügen Ihr Problem lösen.

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

Answer 4

Ich würde es so machen?

$("#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") .on ('keyup', function() {

   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

Sie können positive Lookahead-Regexes verwenden, um den Leerraum beizubehalten - so dass Rückkehrcodes und Tabulatoren nicht auf ein einziges Leerzeichen reduziert werden.Etwas wie folgt aus:

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>