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

11 августа 2014 Антон Кулешов 1549 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
Читайте далее

Э-Зум, зум, зум-м-м! Ну, или как мы картинки увеличивали

25 февраля 2015 Антон Кулешов

Алоха! Всем счастья и добра, ну а сегодня наша тема – увеличение картинки (изображения) при клике мышью. Причем, не только простое зумирование, но и его динамическая проработка.

Эффект печатающий машинки на JavaScript

14 марта 2016 Антон Кулешов

Сегодня я подготовил ответ на вопрос, который пришел мне на почту. Уже из названия можно понять, о чем пойдет речь. Меня спросили: если у меня скрипты с эффектами набора текста на JavaScript. К сожалению, мне не доводилось использовать у себя в практике данный эффект, но написать его будет несложно. К слову, порывшись у себя в закромах, я смог найти jQuery плагин, решающий данную проблему, о котором мы обязательно поговорим в одной из следующих статей, а пока напишем свой скрипт/сниппет.

Делаем форму обратной связи на PHP

8 ноября 2014 Антон Кулешов

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