Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net

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




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

А когда пользователь видит прогресс до лимита - ещё лучше.

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

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

Установка:

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


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

Поделись ссылкой с друзьями:

Комментариев: 0
Просмотров: 129
Дата: 23.12.2020
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Популярные новости
Рамка для ...
Рамка для ...
Рамка для ...
Рамка для ...
Рамка для ...
Рамка для ...
Рамка для ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 5
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 812
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 806
    Категории
    Шаблоны Ucoz бесплатно [24]
    Тут найдете и скачаете Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [23]
    Тут найдете и скачаете Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Тут найдете и скачаете Шапки Ucoz бесплатно
    Иконки для Ucoz [4]
    Тут найдете и скачаете Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [2]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [2]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [34]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Адаптация ...
    Огонь
    • Огонь
    • Просмотров: 133
    • Дата: 13.01.2021
    Фоны для ф...
    Кисть для ...
    Кисть для ...
    Hyper - ша...
    Шрифт - Fu...