регистрация
856материалов
3290комментариев
235тем на форуме
6858пользователей

Ограничение количества символов в 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
Материал просмотрен: 1509 раз
Категория материала: Скрипты для uCoz
К материалу оставлен: 1 комментарий

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

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


veknog
veknog @veknog 04.02.2016 14:151
+7
Прикольно штукенция, надо будет к комментария за бабахать)
avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0