Показать Меню
falbar Счетчик символов

Счетчик символов в текстовом поле на jQuery

Счетчик символов

Посещая различные интернет ресурсы, Вы могли заметить на некоторых из них форму с ограниченной областью ввода и подсчетом введенных символов. Подобное решение применяют, зачастую, на тех ресурсах, где при большой посещаемости необходимо экономить место на хостинге, и чересчур длинные комментарии нежелательны. Реализуется подобный функционал относительно просто, а выглядит интересно. Счетчик символом - это одно из средств, которое помогает пользователю сориентироваться, сколько слов можно ввести в текстовое поле. Самый яркий пример – это Твиттер, где подсчет символов и ограничение длины фразы, скорее, фишка проекта.

Пример, счетчика символов

Вот примерно о таком функционале пойдет речь в этой статье. Перед написанием я полазил по интернету, сравнил с тем, что я писал ранее и в итоге после всех этих действий получился маленький плагин на jQuery. Конечно, при просмотре различных решений, я не мог не заметить, что многие из них великоваты.

Думаю, получилось неплохо, по крайне мере, на время написания статьи. Что бы начать им пользоваться необходимо, подключить библиотеку и сам плагин.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="counterchars.min.js" type="text/javascript"></script>

Далее используем функцию counterСhars() к нужной текстовой области:

$('#textarea').counterChars({
	"limit": 500,
	"text": ""
});

Новая функция принимает два параметра text и limit. По умолчанию ограничение стоит на 100 символов, а текст "Осталось набрать". После того как символов становится меньше 10, добавляется класс warning. Это поможет пользователю отследить критический размер текста при заполнении формы.

Подписаться на обновления

Комментариев еще не оставлено