Просто почніть вводити що-небудь в демо нижче, щоб скрипт автоматично став підраховувати кількість введених слів.
Я створив простий HTML каркас. Я зробив textarea елемент (щоб можна було вводити що-небудь) і нижче додав span куди я виводжу кількість слів використовуючи jQuery. CSS тут особливо значення не має, просто щоб зробити більш-менш адекватний вид елементів.
Структура насправді не так важлива, так як у вас вона може бути якою завгодно. Найважливіше це два ID елемента - id = "count-words" і id = "counted".
id = "count-words" - використовується для того, щоб брати значення поля (що ви в нього введете) і далі вже працює jQuery, який виконує всю іншу магію (про неї я буду писати нижче).
id = "counted" - використовується для того, щоб виводити кількість слів, яке буде підраховано за допомогою jQuery з textarea.
В CSS я нічого описувати не буду, так як все всім повинно зрозуміло. Просто наклав стилі для більш менш зрозумілого вигляду демо.
Скрипт jQuery виконує найважливішу роль - підрахунок слів з textarea.
Спочатку, потрібно дочекатися завантаження сторінки ($ document.ready ()), після чого я використовую ID від textarea ($ ( '# count-words')), щоб вказати скрипту, що потрібно стежити за наступними подіями, які відбуваються всередині цього елемента :
- change - будь-які зміни
- keyup - натискання клавіші вниз
- keydown - після того як ви натиснули клавішу і відпустили її
Дані події стежать за будь-якими діями користувача пов'язаними з натисканням на клавіатуру або мишку.
Далі після того як натискання будь-якої клавіші сталося спрацьовує тіло скрипта:
У першому рядку я використовую функцію .val (). щоб отримати все що було написано в textarea. Результат $ (this) .val () буде рядок. Далі функція $ .trim () прибирає зайві прогалини з самого початку рядка і з кінця.
Щоб порахувати кількість слова я використав функція .split (). Всередині неї я залишив порожній символ (пробіл), щоб зробити з рядка масив.
Наприклад ви ввели: «Всім привіт, як справи?». Цей рядок буде розділена на 4 місця в масиві. Чому? Тому що в ній присутній 4 пробілу, між «Всім» і «привіт» і так далі.
Після того як я отримав масив за допомогою .split (). мені потрібно порахувати кількість елементів в масиві. Цього можна домогтися за допомогою .length.
У другому рядку я просто виводжу результат в span (#counted). І все це відбувається в круговому порядку.
Кожен раз коли користувач щось вводить в поле, скрипт запускається з самого початку і робить одне і теж поки користувач не перестане писати в textarea.