Скрипты (CMS) сайтов Скрипты (CMS) сайтов
  2. Коды
  3. Ucoz
  4. Ucoz хаки
  5. Визуальное ограничение текста для текстового поля

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

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

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

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

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

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

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

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

У меня это вот:

Изображение

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

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

В самом низу всего кода, добавляете скрипт
Обратите внимания на комментарии в коде

  1. let textarea = $('#for_limiter'), // Ваш textarea
  2. limiter = $('#in_limiter'), // тот блок под textarea
  3. vallimit = textarea.attr('maxlength') || 5000, // ограничение, изначально берётся от атрибута maxlength, если его нет то 5000 символов
  4. limitWarn = vallimit-30; // -30 символов от лимита - момент, на котором выдаст предупреждение, что скоро лимит кончиться.
  5.  
  6. limiter.find('.limiter--counter').text(0+' / '+vallimit);
  7. textarea.on('input propertychange', function(){
  8. let vallen = $(this).val().length,
  9. classes = vallen == vallimit ? ' --limited' : vallen >= limitWarn ? ' --warning' : '';
  10. limiter.attr('class', 'limiter'+classes);
  11. limiter.find('.limiter--progress-bg').css('width', (100 / (vallimit / vallen)).toFixed(2)+'%');
  12. limiter.find('.limiter--counter').text(vallen+' / '+vallimit);
  13. });

Ну и стили

  1. .limiter {display: block; width: 100%;}
  2. .limiter .limiter--progress {display: block; width: 100%; height: 5px; background: #d7dfe3; border-radius: 2px; position: relative; overflow: hidden; margin: 5px 0 2px;}
  3. .limiter .limiter--progress-bg {display: block; width: 0; background: #95a5a6; max-width: 100%; height: inherit; position: absolute; left: 0; transition: background-color .2s linear;}
  4. .limiter.--warning .limiter--progress-bg {background: #e67e22;}
  5. .limiter.--warning .limiter--counter {color: #e67e22;}
  6. .limiter.--limited .limiter--progress-bg {background: #e74c3c;}
  7. .limiter.--limited .limiter--counter {color: #e74c3c;}
ucozucoz хакивизуальное ограничениетекста для текстового полявизуальноеограничениетекстадля текстовогополя
09:00
admin
Коды
Нет комментариев. Ваш будет первым!
Посещая этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.