Ограничение количества символов в textarea и input
827материалов
228тем на форуме
3004комментария
6159пользователей

Ограничение количества символов в textarea и input


Описание:

Наверняка, каждый веб-разработчик рано или поздно сталкивается с необходимостью проверки правильности заполнения форм. Один из главных этапов этой проверки – это допустимая длина содержимого различных полей. И если возможности языка разметки HTML позволяют ограничить длину содержимого полей типа “input”, то ограничивать длину содержимого полей “textarea” является невозможным без использования дополнительных сценариев.

Приведу достаточно простой пример сценария, написанного на JavaScript, позволяющего контролировать ввод содержимого в такие поля, автоматически блокировать возможность заполнения при достижении определённой длины уже введённого содержимого и выводить в нужном месте счётчик количества символов. Функция достаточно универсальная, так как в качестве параметров в неё передается 3 значения: “id” поля, ввод в которое необходимо контролировать; “id” элемента, в котором требуется выводит счетчик символов и, собственно, значение максимальной длины содержимого проверяемого элемента (количество допустимых символов).

Установка скрипта:

Для начала скачиваете архив с нашего сайта и папку character-limit загружаете в свой файловый менеджер!
Теперь, в нижнюю часть сайта, перед закрывающим тегом </body> вставляете код:
Код
<script type="application/javascript" src="/character-limit/character-limit.js"></script>
<script>
$(document).ready(function () {
$('#character-limit').characterCounter({
maxLen: 95,
warningLen: 30,
showMsg: true,
customMsg: "Максимально количество символов - 95. Больше нельзя)",
separator: "/",
warningColor: "#d50000",
});
})
</script>

Настройка скрипта:

  • maxLen: 95 - максимально количество символов
  • warningLen: 30 - при достижении определенного лимита цвет поменяется
  • showMsg: true - не трогаем
  • customMsg: "Максимально количество символов - 95. Больше нельзя)" - подсказка когда наступит лимит
  • separator: "/" - разделитель между  введенными символами и максимальным количеством
  • warningColor: "#d50000" - цвет при достижении определенного лимита
Продолжение установки:

Теперь подписываем код ограничителя в textarea или в input
Код
id="character-limit"

Должно выглядеть так:
Цитата
<textarea id="character-limit"></textarea>

или так:
Цитата
<input id="character-limit">

Теперь, где хотите видеть количество введенных и оставшихся символов, вставляете код:
Код
<p id="counter"></p>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 04.02.2016 в 14:00
Материал просмотрен: 809 раз
Категория материала: Скрипты для uCoz
К материалу оставлен: 1 комментарий

Пожаловаться
Сказать спасибо
Источник

1 комментарий


veknog
veknog @veknog 04.02.2016 14:151
+7
Прикольно штукенция, надо будет к комментария за бабахать)
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта