jquery обзор плагинов

Динамический подсчет вводимых символов для полей ввода input и textarea как на twitter

Обратимся к twitter чтобы понять принцип работы плагина. Сообщения в twitter ограничены 140символами. Когда вы пишите сообщение, то видите информацию о том, сколько еще символов вы можете использовать. При приблежение к установленному лимиту также меняется цвет текста у счетчика.

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

Как работает плагин

Прежде всего плагин создает элемент для счетчика и размещает его сразу поле поля формы. При каждом срабатывание keyup или change для текстового поля вызывается функция подсчета символов. Если количество символов находится в зоне ‘предупреждение’, то к элементу с выводом счетчика добавляется CSS класс (используется чтобы изменить цвет счетчика).  При достижение счетчика нуля и переходе к отрицательным значениям, добавляется еще один класс, чтобы можно было задать другой стиль.

Вот код, который генерирует плагин по умолчанию:

1

<span class="counter">140</span>

Установка

Для работы необходимо скачать jQuery и плагин, и подключить их:

1
2

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="charCount.js"></script>

1

$("#message1").charCount();

1
2
3
4
5

$("#message2").charCount({
   allowed: 50,
   warning: 20,
   counterText: 'Characters left: '
});

1
2
3
4
5
6
7
8
9
10

form .counter{
   position:absolute;
   right:0;
   top:0;
   font-size:20px;
   font-weight:bold;
   color:#ccc;
}
form .warning{color:#600;}
form .exceeded{color:#e00;}