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

11 августа 2014 Антон Кулешов 1555 0

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

Реклама
primer-schetchika-simvolov

Вот примерно о таком функционале пойдет речь в этой статье. Перед написанием я полазил по интернету, сравнил с тем, что я писал ранее и в итоге после всех этих действий получился маленький плагин на 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. Это поможет пользователю отследить критический размер текста при заполнении формы.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Simple Text Rotator – спецэффекты для вращающегося текста

31 июля 2015 Антон Кулешов

В большинстве случаев, когда вы ведете обычный блог, то манипуляции с текстом крайне нежелательны, так как они отвлекают от чтения. Но если вы что-то продаёте или хотите выделить, к примеру, слово, чтобы ваш посетитель обратил внимание в первую очередь на его, то тут есть масса вариантов как это сделать. Банально придумать интересное оформление, воспользовавшись CSS стилями, но в сегодняшней статье я предлагаю придать этому явлению чуть больше динамики.

Анимированный прогресс бар в 4 строки кода

11 декабря 2014 Антон Кулешов

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

О том, как скачать видео с Ютуба и Вк

27 января 2016 Антон Кулешов

Оставим ненадолго серьёзные темы аутентификаций через социальные сети и сегодня я расскажу об очень приятном сервисе, который позволяет скачивать аудио и видео контент там, где это невозможно стандартными методами. Кнопка скачать попросту отсутствует на Ютубе, ВКонтакте, Фейсбук и куче других популярных сервисов. Конечно, продвинутый пользователь может скачать видео или аудио стандартными средствами браузера, но это сложно.