jQuery Girl
  1. jQuery Girl
  3. Supprimer les mots en excès d’une zone de texte
Intereting Posts
Problèmes de défilement jQuery avec scrollTop jQuery / JavaScript: est-ce une date? (Valider s’il s’agit d’une date) Jquery .on versus .live Importer dans le bloc-notes à l’aide de jQuery Problèmes de rappel d’une fonction d’animation lors de la création d’une galerie d’images jQuery. Boutons Suivant / Précédent JQuery Ajax ne montrant pas d’alerte de réussite La requête POST jQuery .ajax () renvoie 405 (méthode non autorisée) sur WCF RESTful jQuery ajoute une classe .active dans le menu jQuery AJAX utilisant fadeIn + replaceWith Stupéfier les animations CSS Safari met toutes les animations en pause lors de la redirection / soumission du formulaire Essayer d’accéder à l’API Instagram avec jQuery Comment créer un compte à rebours jQuery qui ne redémarre pas à l’actualisation IE7: impossible pour le menu de restr en haut de la page Ce qui est plus efficace: .parent (). Parent (). Parent () ~ ou ~ parents (“. Foo”) ~ ou ~ le plus proche (“. Foo”)

Supprimer les mots en excès d’une zone de texte

J’ai un script qui est presque terminé mais je ne peux pas comprendre le dernier bit ici. Le script a pour but de limiter le nombre de mots pouvant être entrés dans une zone de texte. S’ils dépassent la limite de mots, ces mots supplémentaires sont supprimés. J’ai la quantité de mots au-delà du maximum étiquetés comme étant excédentaires. Par exemple, si vous saisissiez 102 mots, le dépassement serait alors de 2. Comment supprimer ces deux mots de la zone de texte? 

jQuery(document).ready(function($) { var max = 100; $('#text').keyup(function(e) { if (e.which  max) {   var overage = wordCount - max; var words = value.split(' '); for(var i = 0; i<overage; i++){ words.pop(); } } }); });

La façon la plus simple de procéder consiste simplement à compter le nombre de mots sur la keypress et à partir de là. Vérifiez s’il y a plus de mots que le nombre autorisé. Si tel est le cas, supprimez tous les mots en trop: while (text.length > maxWords) . Il suffit ensuite de remplacer la valeur de la zone de texte par le texte mis à jour.

violon

JavaScript 

 var maxWords = 10; $("#myText").keypress(function (event) { var text = $(this).val().split(" "); // grabs the text and splits it while (text.length > maxWords) { // while more words than maxWords event.preventDefault(); text.pop(); // remove the last word // event.preventDefault() isn't absolutely necessary, // it just slightly alters the typing; // remove it to see the difference } $(this).val(text.join(" ")); // replace the text with the updated text })

HTML 

 
Enter no more than 10 words:

CSS 

 textarea { width: 300px; height: 100px; }

Vous pouvez facilement vérifier si cela fonctionne en collant plus de maxWords – dans ce cas, 10 mots dans la zone de textarea et en appuyant sur espace. Tous les mots supplémentaires seront supprimés.

Vous pouvez mettre le code ci-dessous dans votre déclaration else if .. 

 else if (wordCount > max) { var overage = wordCount - max; var words = value.split(' '); for(var i = 0; i

Et si vous voulez récupérer votre chaîne à partir de ces words , vous pouvez utiliser join comme ci-dessous: 

 str = words.join(' ');

eh bien, il vaudrait mieux utiliser le script java alors allez-y: 

 var maxWords = 20; event.rc = true; var words = event.value.split(" "); if (words.length>maxWords) { app.alert("You may not enter more than " + maxWords + " words in this field."); event.rc = false; }

jsFiddle Demo

Vous pouvez utiliser val pour re-valoriser la zone de texte. La méthode slice array vous permettra d’extraire les 100 premiers mots du tableau. Ensuite, rejoignez-les avec un espace et collez-les dans la zone de texte. 

 $(document).ready(function($) { var max = 100; $('#text').keyup(function(e) { if (e.which < 0x20) { return; } var value = $('#text').val(); var words = value.trim().split(/\s+/gi); var wordCount = words.length; if (wordCount == max) { // Reached max, prevent additional. e.preventDefault(); } else if (wordCount > max) { var subssortingng = words.slice(0, max).join(' '); $("#text").val(subssortingng + ' '); } }); });

Bien que vous ayez déjà accepté une réponse, je pensais pouvoir proposer une version un peu plus raffinée: 

 function limitWords(max){ // setting the value of the textarea: $(this).val(function(i,v){ // i: the index of the current element in the collection, // v: the current (pre-manipulation) value of the element. // splitting the value by sequences of white-space characters, // turning it into an Array. Slicing that array taking the first 10 elements, // joining these words back together with a single space between them: return v.split(/\s+/).slice(0,10).join(' '); }); } $('#demo').on('keyup paste input', limitWords);

Démo de JS Fiddle .

Références:

  • JavaScript:
    • Array.prototype.join() .
    • Array.prototype.slice() .
    • Ssortingng.prototype.split() .
  • jQuery:
    • on() .
    • val() .