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


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

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

Установка:


Установка, на примере текстового поля в комментариях на 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;}


На этом всё.

Комментарии
Комментариев пока нет..
Ты можешь быть первым, кто оставит комментарий к публикации!


Вы не зарегистрированы

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


Автор публикации
Дата публикации
19-01-2022, 15:46
Просмотров
163
Комментариев
0

0
0
Внимание! Данный материал предоставлен сайтом VipAdmin.Club исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое
Как скачать?
Пройдите регистрацию на сайте
Воспользуйтесь кнопкой "Скачать"
Ровно через 15 секунд вам будет доступна прямая ссылка на файл
Визуальное ограничение текста для текстового поля
19-01-2022, 15:46
163

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

Информация
Версия
v1.405
Версия CMS
v15.0
Тематика
Новости, Блог, Каталог
Фреймворк
Bootstrap v5

Описание


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

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

Установка:


Установка, на примере текстового поля в комментариях на 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;}


На этом всё.
[xfgiven_images]
Изображения
[/xfgiven_images]
Автор публикации
wad
Реклама1
Реклама1
Комментарии и отзывы
  • Пустота..
    Людям пока лень писать тут отзывы и комментарии..


  • Вы не зарегистрированы

Последние комментарии
CMS Unisite 4.7 nulled
Гость Mark
26 января 2023 16:32
Кому нужна версия 4.8
CryptEx v2.1.0 NULLED - платформа обмена криптовалюты
Ramzan
23 января 2023 20:25
привет поможешь мне одном деле ?
CryptEx v2.1.0 NULLED - платформа обмена криптовалюты
Kotyara
23 января 2023 13:08
Скажите пожалуйста а какой ключ лицензии
Скрипт автодоната Buy Privileges 3.0 (Слив)
zoro33
22 января 2023 12:52
этот скрипт фигня там функция продление привилегии в личном кабинете не работает
CMS для игрового проекта Minecraft
HideRR
21 января 2023 03:09
Личный кабинет или магазин блоков хоть у кого то получилось подключить что бы он отображался и
CMS Unisite 4.7 nulled
Гость Damir
20 января 2023 21:48
ключ активации: 1
CodeIgniter-Sample-проект
vdvd
18 января 2023 01:21
#96 xcv dvdfvdvdfv dfbdfvdv
TopAuto v1.0.4 - адаптивный шаблон интернет-магазина автозапчастей и автотоваров
Гость Владимир
15 января 2023 11:22
Как установить данный шаблон где взять инструкцию?
Unisite Board 4.4 NULLED NEW 2022
Антон
14 января 2023 16:00
UniSite Board (Доска объявлений) v4.8 zupic ru
Скрипт Payeer бонусника CashLike
Гость Илья
13 января 2023 11:54
Не выдает бонусы,Может подскажет кто что с этим делать?
Cursus v1.3.6 NULLED - скрипт продажи онлайн-курсов
kivon35
12 января 2023 22:37
На последнем этапе установки, кнопка Click to Login не активна. Скрипт не устанавливается.
Joomly Contactus Premium v3.22 - форма обратной связи для Joomla
Виталий
11 января 2023 00:52
Шикарный модуль, Но не работает для Joomla 4 Возможно его сделать для J4?
User Blogs System (UBS) 2.2.2
appsfinder
11 января 2023 00:49
thanks for this addon
CMS Unisite 4.7 nulled
Kniaz
8 января 2023 23:29
Доброго времени суток. Может кто подскажет как обойти ключ активации?)
DLE-Favorites v.1.0.2 by Sander
ngm
6 января 2023 02:11
cvbcvbadasd