Doar începeți să introduceți ceva în demo de mai jos, astfel încât scriptul să contabilizeze automat numărul de cuvinte introduse.
Am creat un cadru HTML simplu. Am facut un element textarea (astfel incat sa pot intra in ceva) si mai jos am adaugat o deschidere in care ies la iveala numarul de cuvinte folosind jQuery. CSS aici nu contează, doar pentru a face un fel de elemente mai mult sau mai puțin adecvate.
Structura nu este cu adevărat atât de importantă, pentru că o puteți avea în orice fel. Cele mai importante sunt cele două ID-uri ale elementului - id = "count-words" și id = "counted".
id = "count-words" - folosit pentru a lua valoarea câmpului (ceea ce intri în el) și apoi jQuery rulează deja, ceea ce face tot restul magiei (o să scriu mai jos).
id = "counted" - folosit pentru a extrage numărul de cuvinte care vor fi contorizate folosind jQuery din textarea.
În CSS, nu voi descrie nimic, deoarece totul ar trebui să fie clar pentru toată lumea. Doar puneți stilurile pentru un demo mai puțin de înțeles.
Scriptul jQuery îndeplinește cel mai important rol - numărarea cuvintelor din textarea.
Inițial, trebuie să așteptați ca pagina să se încarce ($ document.ready ()), după care folosesc ID-ul din textarea ($ ('# count-words')) pentru a spune scriptului să monitorizeze următoarele evenimente care apar în interiorul acestui element :
- schimbare - orice schimbare
- tasta - tasta în jos
- keydown - după ce ați apăsat cheia și ați lansat-o
Aceste evenimente monitorizează orice acțiune a utilizatorului asociată cu clic pe tastatură sau pe mouse.
Apoi, după apăsarea unei taste, se declanșează corpul scriptului:
În prima linie, folosesc funcția .val (). pentru a obține tot ce a fost scris în textarea. Rezultatul $ (this) .val () va fi un șir. Funcția următoare $ .trim () elimină spații suplimentare de la începutul liniei și de la sfârșit.
Pentru a calcula numărul de cuvinte, am folosit funcția .split (). Înăuntru, am lăsat un caracter gol (spațiu) pentru a face o matrice din șir.
De exemplu, ați introdus: "Buna, ce mai faci?". Această linie va fi împărțită în 4 locuri în matrice. De ce? Deoarece există 4 spații în ea, între "Toate" și "salut" și așa mai departe.
După ce am primit matricea folosind .split (). Trebuie să calculez numărul elementelor din matrice. Acest lucru se poate realiza cu lungime.
În cea de-a doua linie, am doar ieșirea rezultatului în interval (#count). Și toate acestea se întâmplă într-un mod circular.
De fiecare dată când un utilizator intră în câmp, scriptul rulează de la bun început și face același lucru până când utilizatorul nu mai scrie în textarea.
Trimiteți-le prietenilor: