11 августа 2014
.
Антон Кулешов
Счетчик символов в текстовом поле на 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. Это поможет пользователю отследить критический размер текста при заполнении формы.
