Мы в твиттере Наша страничка на FaceBook! Сообщество вебмастеров в VK Мы в телеграме!

PW — всё для вебмастера » Всё для uCoz » uCoz хаки » Визуальное ограничение текста для текстового поля


Визуальное ограничение текста для текстового поля

Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Визуальное ограничение текста для текстового поля.

Визуальное ограничение текста для текстового поля


Когда у вас есть ограничение на количество введённых символов в текстовом поле - это хорошо.
Когда пользователь об этом оповещён - это тоже хорошо.
А когда пользователь видит прогресс до лимита - ещё лучше.

Во время ввода текста в поле, пользователь будет видеть как заполняется прогресс-бар, а так же сможет точно узнать количество введённых символов и какой лимит вообще.

В общем, меньше слов, больше дела.

Установка:


Установка, на примере текстового поля в комментариях на uCoz.

Вам нужно в ПУ > Управление дизайном > Форма добавления комментариев, найти следующее:
Это текстовое поле, с атрибутом name="message"

У меня это вот:
Визуальное ограничение текста для текстового поля



Далее добавляете ему какой-нибудь уникальный id, у меня id будет for_limiter, и под ним добавляете код:

<!-- У дива ниже должен быть тоже уникальный ид, у меня это in_limiter -->
<div id="in_limiter" class="limiter">
<div class="limiter--progress">
<div class="limiter--progress-bg"></div>
</div>
<div class="limiter--counter"></div>
</div>



В самом низу всего кода, добавляете скрипт
Обратите внимания на комментарии в коде
let textarea = $('#for_limiter'), // Ваш textarea
limiter = $('#in_limiter'), // тот блок под textarea
vallimit = textarea.attr('maxlength') || 5000, // ограничение, изначально берётся от атрибута maxlength, если его нет то 5000 символов
limitWarn = vallimit-30; // -30 символов от лимита - момент, на котором выдаст предупреждение, что скоро лимит кончиться.

limiter.find('.limiter--counter').text(0+' / '+vallimit);
textarea.on('input propertychange', function(){
let vallen = $(this).val().length,
classes = vallen == vallimit ? ' --limited' : vallen >= limitWarn ? ' --warning' : '';
limiter.attr('class', 'limiter'+classes);
limiter.find('.limiter--progress-bg').css('width', (100 / (vallimit / vallen)).toFixed(2)+'%');
limiter.find('.limiter--counter').text(vallen+' / '+vallimit);
});


Ну и стили

.limiter {display: block; width: 100%;}
.limiter .limiter--progress {display: block; width: 100%; height: 5px; background: #d7dfe3; border-radius: 2px; position: relative; overflow: hidden; margin: 5px 0 2px;}
.limiter .limiter--progress-bg {display: block; width: 0; background: #95a5a6; max-width: 100%; height: inherit; position: absolute; left: 0; transition: background-color .2s linear;}
.limiter.--warning .limiter--progress-bg {background: #e67e22;}
.limiter.--warning .limiter--counter {color: #e67e22;}
.limiter.--limited .limiter--progress-bg {background: #e74c3c;}
.limiter.--limited .limiter--counter {color: #e74c3c;}



На этом всё.
Так же можете взять код из демо




Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных


+3


Просмотры: 525 :: Комментарии (0) :: :: Нужна помощь? Задайте вопрос на форуме ::
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

Prowebber VK - сообщество ВКонтакте
Prowebber.ru - всё для настоящего вебмастера

Онлайн ТВ и Радио, Cмотрите абсолютно бесплатно!
http://uzon.tv

Скачать БЕСПЛАТНО Премиум Темы и Плагины с переводом на РУССКИЙ!

заходи и испробуй что то типа ютуб https://luckyx.online/

сервис сокращения URL-адресов https://luckyx.ru/

Наши баннеры
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Каких материалов НЕ хватает на сайте?

Шаблонов
Скриптов
Программ
Графики
Уроков и курсов

Архив новостей
Апрель 2021 (477)
Март 2021 (522)
Февраль 2021 (183)
Январь 2021 (107)
Декабрь 2020 (118)
Ноябрь 2020 (82)

Последние комментарии:

Искать людей

Ваши переписки