ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Ограничение символов при вводе текста

Ограничение символов при вводе текста

В статье представлено решение, которое визуально ограничивает текст в текстовом поле, где вы задаете сколько знаков должно быть при отправке. На многих ресурсах можно увидеть, что счетчик отсчитывает, сколько знаков проставлено. Но здесь мы изначально задаем значение, как пример, это 500 знаков, где задается шкала, которую отлично видно.

Что не мало важно, что она визуально просматривается, так как находится внизу, где ее можно сделать ярким под свой дизайн цвета. А то иногда так получается, что гость или пользователь старается писать, а как начинает отправлять, то ему сообщают, что много символов. И здесь не будет второй попытки написать, он просто в большинстве закроет страницу.

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

Так примерно должно просматриваться:

Пример ограничения количества введённых символов в textarea

А здесь можно наблюдать горизонтальную полосу, что появится при прописывание знаков:

Максимальное количество символов, которое будет приниматься в поле

Установочный процесс:

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

Здесь нужно подключить библиотеку, в тех случаях у кого она не подключена или он на конструкторе uCoz, так как там она вшита по умолчанию, что не нужно устанавливать.

Код

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

HTML

Код

CSS

Код

.add-text{
display: block;
width: 100%;
max-width: 350px;
background: #fff;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
}

.add-text textarea{
display: block;
width: 100%;
max-width: 100%;
min-height: 100px;
border: 1px solid #aaa;
border-radius: 5px;
background: #eee;
padding: 10px;
box-sizing: border-box;
resize: vertical;
font: inherit;
}

.add-text textarea:focus{
border-color: #ccc;
background: #fff;
}

.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;
}

Код

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

$('#in_limiter .limiter--counter').text(0+' / '+vallimit);
$('#for_limiter').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);
});

На этом установка завершена, где вы изначально можете посмотреть работу этого материала.

Демонстрация

Автор: Denis Minov (CbIPoK2513)
Источник: pandora.clan.su

19 Августа 2019 Загрузок: 1 Просмотров: 1143 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0