Выводит количество символов в textarea с помощью jQuery

Выводит количество символов в textarea с помощью jQuery

Наверное, все знают что такое Twitter и обращали внимание на то как там реализован подсчет символов в поле сообщения. Как говорится, и выглядит красиво и функциональности добавляет.

На одном из моих сайтов я делаю что-то под вид коллективного блога, который соответственно работает на Textpattern`е. Пользователи на этом сайте смогут добавлять статьи самостоятельно и именно для них было решено реализовать подобный твитеровскому подсчет символов, а то наличие коротких сообщений не сильно способствует увеличению страниц в индексе поисковых систем.

Все благополучно получилось и хотелось бы поделится своими знаниями.

Зачем это нужно?

Подсчет количества символов в textarea нужно, в первую очередь, для удобства вашего посетителя. Это не заправка картриджей, это дополнение вашему сайту функциональности не добавит, только удобство. Если, скажем, у Вас на сайте стоит ограничение на максимальную или минимальную длину символов в сообщениях или комментариях, то посетителю вашего сайта будет не сильно приятно, если при нажатии кнопки Отправить он будет наблюдать на своем экране ошибку, что его труды не соответствуют вашим правилам. Даже если Вы сверху напишите огромными буквами, красными буквами эти правила, посетитель все равно будет Вас материть. И если у Вас не мега-крутой контент, который в единственном экземпляре лежит у Вас на сайте, то он просто закроет ваш сайт и забудет о нем навсегда.

Интерактивно контролировать набранные символы куда удобнее и приятнее, чем что-то делать в слепую. Поэтому если Вы задаете какие-либо ограничения, будьте добры, подумать об удобстве их выполнения.

Как это работает? Примеры вывода количества символов в textarea

Чтобы не рассказывать о мыльных пузырях, проще показать как это все работает. Вот пример формы:

Как реализовать подсчет символов в textarea

Приведенный выше подсчет символов в textarea реализовывается очень просто.
Вот пошаговый список действий:

  1. Загрузить архив с JS-скриптом и примером можно отсюда.
  2. Помещаем выше формы textarea следующий код:
    <script src="/textpattern/jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="/textpattern/charCount.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#primer").charCount({
    allowed: 140,
    warning: 20,
    counterText: 'Необходимо символов: '
    });
    });
    </script>
    Отсюда видно, что #primer – это идентификатор вашей формы textarea, а /textpattern/jquery.js и /textpattern/charCount.js – это пути до jQuery и JS-скрипта с подсчетом. Я обычно все JS-скрипты кладу в /textpattern, поэтому пути в примере ведут именно туда.
  3. Далее должна следовать сама форма:
    <form>
    <textarea id="primer">
    </textarea>
    </form>

Вот и все.

Для удобства настройки отображения хотелось бы еще сказать, что сам счетчик имеет класс .counter, если он превышает лимит, то класс .warning, а при подходе к порогу класс .exceeded.

Кстати, большое спасибо хотелось бы сказать ресурсу cssglobe.com, так как этот чудо-скрипт был взят именно оттуда.

Комментарии:

Имя
e-mail
Сайт
Текст комментария: