Написал небольшой скрипт, который подсчитывает количество слов в textarea/input.
Демо
Просто начните вводить что-нибудь в демо ниже, чтобы скрипт автоматически стал подсчитывать количество введенных слов.
See the Pen qZdyrx by Alexander (@bologer) on CodePen.21516
Как это работает?
Я создал простой HTML каркас. Я сделал textarea элемент (чтобы можно было вводить что-нибудь) и ниже добавил span куда я вывожу количество слов используя jQuery. CSS тут особо значения не имеет, просто чтобы сделать более менее адекватный вид элементов.
HTML
<div class="main-block"> <textarea id="count-words" placeholder="Начните вводить что-нибудь..."></textarea><span id="word-count">Колличество слов: <span id="counted">0</span></span> </div>
Структура на самом деле не так важна, так как у вас она может быть какой угодно. Самое важное это два ID элемента — id="count-words"
и id="counted"
.
id="count-words"
— используется для того, чтобы брать значение поля (что вы в него введете) и дальше уже работает jQuery, который выполняет всю остальную магию (о ней я буду писать ниже).
id="counted"
— используется для того, чтобы выводить количество слов, которое будет подсчитано с помощью jQuery из textarea.
CSS
В CSS я ничего описывать не буду, так как все всем должно понятно. Просто наложил стили для более менее понятного вида демо.
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font: 12pt Verdana, Tahoma, sans-serif; } .main-block { width: 50%; margin: 50px auto; display: block; } .main-block #count-words { padding: 10px; } .main-block #count-words, .main-block #word-count { width: 100%; float: left; } .main-block #word-count { margin-top: 5px; font-size: 8pt Verdana, Tahoma, sans-serif; color: #aaa; }
jQuery
Скрипт jQuery выполняет самую важную роль — подсчет слов из textarea.
$(function() { $(document).ready(function() { $('#count-words').on('change keyup keydown', function() { var $_count = parseInt($.trim($(this).val()).split(' ').length) - 1; // Подсчет слов $('#word-count').find('#counted').text($_count); // Вывод подсчета }); }); });
Изначально, нужно дождаться загрузки страницы ($document.ready()
), после чего я использую ID от textarea ($('#count-words')
), чтобы указать скрипту, что нужно следить за следующими событиями, которые происходят внутри этого элемента:
- change — любые изменения
- keyup — нажатие клавиши вниз
- keydown — после того как вы нажали клавишу и отпустили ее
Данные события следят за любыми действиями пользователя связанными с нажатием на клавиатуру или мышку.
Далее после того как нажатие какой-либо клавиши произошло срабатывает тело скрипта:
var $_count = parseInt($.trim($(this).val()).split(' ').length) - 1; // Подсчет слов $('#word-count').find('#counted').text($_count); // Вывод подсчета
В первой строке я использую функцию .val()
, чтобы получить все что было написано в textarea. Результат $(this).val()
будет строка. Далее функция $.trim()
убирает лишние пробелы с самого начала строки и с конца.
Чтобы посчитать количество слова я использовал функция .split()
. Внутри нее я оставил пустой символ (пробел), чтобы сделать из строки массив.
Например вы ввели: «Всем привет, как дела?». Данная строка будет разделена на 4 места в массиве. Почему? Потому что в ней присутствует 4 пробела, между «Всем» и «привет» и так далее.
После того как я получил массив с помощью .split()
, мне нужно посчитать количество элементов в массиве. Этого можно добиться с помощью .length.
Во второй строке я просто вывожу результат в span (#counted). И все это происходит в круговом порядке.
Каждый раз когда пользователь что-то вводит в поле, скрипт запускается с самого начала и делает одно и тоже пока пользователь не перестанет писать в textarea.