Introduction du cas: Nous voyons souvent des sites Web avec des zones de texte textarea. Lorsque vous entrez, il existe des invites de texte ci-dessous combien de mots pouvez-vous entrer. Aujourd'hui, c'est implémenter cette fonction. Bien sûr, comme une page a plusieurs textares, il n'est pas possible d'utiliser une seule logique JS pour le contrôle, il doit donc être encapsulé de manière petite. Bien sûr, mon emballage a encore quelques lacunes, mais la fonction de base est implémentée.
Tout d'abord, introduisez un seul cas d'implémentation de TextArea
HTML PARTIE:
<TextArea id = "text_txt1"> </ textarea> <span id = "num_txt1"> Les 600 mots restants peuvent être entrés </span>
JS Partie:
$ (function () {$ ('# text_txt1'). on ('keyup', function () {var txtVal = $ ('# text_txt1'). val (). length; console.log (txtVal); var str> 0 ) {$ ('# num_txt1'). html ('restant peut entrer' + str + 'word');} else {$ ('# num_txt1'). que ou égal à 0, le nombre de mots ne peut pas être augmenté, il ne peut être que 600 mots} // console.log ($ ('# num_txt'). html (str));});})Présentez ensuite plusieurs cas d'implémentation de TextArea sous la même page
fonction changeLength (obj, num) {obj.on ('keyup', function () {var txtVal = obj.val (). Length; // console.log (txtval); var str = parseInt (600-txtval); // console.log (str); if (str> 0) {num.html ('resterable contacte' + str + '} {num.html ('respectable entrée 0 mots'); obj.val (obj.val (). substring (0, 600));} // console.log ($ ('# num_txt'). html (str));});} $ (function () {// j'ai quatre ici, donc ChangeLength ($ ('# text_txt1'), $ ('# num_txt1')); ChangeLength ($ ('# text_txt2'), $ ('# num_txt2')); c HenteLlong ($ ('# text_txt3'), $ ('# num_txt3')); ChangeLength ($ ('# text_txt4'), $ ('# num_txt4'));});Bien sûr, le nombre de mots requis ici peut également être encapsulé à l'intérieur de la fonction, mais je ne le résumerai pas. Cela se rend compte que lors de la saisie du texte, les mots restants seront automatiquement affichés à l'intérieur de la portée. Lorsque la valeur d'entrée atteint la valeur la plus élevée, les mots restants seront affichés comme 0 et le contenu ne peut pas être rempli de nouveau contenu. Lors de la suppression du texte, Span peut obtenir dynamiquement le nombre de mots restants.
Voici les codes des autres, et cette fois, j'ai également emprunté certaines des méthodes d'écriture des autres
HTML:
<div> <p> Introduction: </p> <textarea id = "contenu" name = "signe" style = "height: 60px; overflow-y: Hidden;" onKeyUp = "ChangeLength (this, 60)"> </ textArea> <div> <h3> 60 </h3> </div> </div>
JS:
// Vérifiez la longueur de la fonction textarea changeLength (obj, lg) {var len = $ (obj) .val (); $ (obj) .next (). find ("h3"). text (lg-len.length); if (len.length> = lg) {$ (obj) .next (). find ("h3"). text (0);Ce qui précède est la méthode d'obtention de mots restants dynamiques dans TextArea basé sur JS introduit par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!