Счетчики символов под полями «textarea» можно встретить в основном в системах публикации комментариев в соцсетях или на других сайтах. На формах обратной связи они встречаются не настолько часто. Однако, в зависимости от задачи, которую выполняет определенное поле этого типа, такая необходимость может возникнуть.

В этой статье мы не только создадим счетчик символов для поля «textarea» на примере формы Chronoforms 6, но и реализуем блокировку их ввода.

Этот пример подойдет не только для форм, создаваемых с помощью компонента Chronoforms 6, но и вообще для любых форм обратной связи, где присутствует поле для ввода текста.

Создание счетчика символов под «Textarea» на форме Chronoforms 6

Создание счетчика символов под «Textarea» на форме Chronoforms 6 начинается с предварительных настроек самого поля.

Наш счетчик ничем особенным от себе подобных не отличается, а потому будет иметь на странице формы следующий вид:

Счетчик символов для поля «textarea» на примере формы Chronoforms 6

Рис. 1

Сразу отмечу, что в случае с Chronoforms никаких дополнительных элементов вроде «HTML» и прочего на форму под полем «Textarea» добавлять не нужно. Во всех версиях компонента к подавляющему большинству полей можно добавить краткое описание. Этот параметр отвечает за генерацию на форме дополнительного DOM-элемента рядом с целевым. Этот дополнительный элемент и содержит данное описание. В CF6 в таких случаях создается тег «small». Его можно легко обнаружить в коде страницы с помощью инструментов разработчика любого браузера.

Создание счетчика символов под «Textarea» на форме Chronoforms 6

Рис. 2

Итак, нам нужен параметр «Описание» (Description) во вкладке редактора поля «Инфо» (Info). Он поддерживает Html-код — а это как раз то, что нужно. А нужна не вся строка «Доступно для ввода 500 из 500 символов», а только ее подстрока «500». Ее и заключаем в тег «span» с классом «counter», чтобы получилось так:

    Доступно для ввода <span class='counter'>500</span> из 500 символов.

Параметр «Описание» (Description) во вкладке редактора поля на форме Chronoforms 6

Рис. 3

Переходим во вкладку «Валидация» (Validation) и устанавливаем максимальную длину текста 500. Параметр минимальной длины указывать не нужно.

Затем, во вкладке «Дополнительно» добавим класс контейнера «mytext», как показано здесь:

Вкладка «Дополнительно»  редактора поля на форме Chronoforms 6

Рис. 4

На этом с настройкой поля «Textarea» закончили. Сохраняем форму, обновляем страницу и двигаемся дальше.

Теперь нам нужна js-функция, которая будет подсчитывать символы и печатать количество доступных  внутри «counter» для всех полей «Textarea», имеющих класс «mytext» (сколько бы их не было на форме). Это означает, что она сможет работать также с полями, дублируемыми с помощью мультипликатора (множителя).

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

Для создания функции понадобится еще один инструмент — «JavaScript», который нужно взять в группе «Custom» и перетащить мышью в область формы таким образом, чтобы он оказался выше обрабатываемого функцией поля. Открываем элемент для редактирования и ставим галку «Добавить в событие загрузки формы»:

Элемент «JavaScript» для создания функции счетчика символов на форме Chronoforms 6

Рис. 5

Код самой функции, с учетом того, что CF использует библиотеку JQuery, будет таким:

    jQuery(function($) {
    
         $('.mytext').on('keyup keypress paste', 'textarea', function(event) {
            var mytext = $(this),                 // Текущее обрабатываемое поле "textarea"               
                counter = mytext.next('small')    // span с классом "counter"
                .find('.counter'),
                max_char = 500;                   // Максимальное количество символов
                
            if (mytext.val().length >= max_char) { // Проверка количества символов
                    
                     counter.text(0);
                           } else {
                                counter.text(max_char - mytext.val().length)}
        }); // End func
    
    }); //End mainfunc

Сохраняем форму, проверяем. Если все сделали правильно, счетчик должен работать.

Результат работы счетчика символов на форме Chronoforms 6

Рис. 6

Теперь переходим к блокировке ввода лишних символов.

Блокировка ввода символов в поле «Textarea» при достижении их максимума

Польза от счетчика будет стремиться вниз без блокировки ввода символов в поле «Textarea» при достижении их максимума. Поэтому добавим в обработку результатов проверки в нашей функции всего две строчки:

   event.preventDefault();                      // Блокировка ввода
   mytext.val(mytext.val().slice(0,max_char));  // Обрезка текста

В итоге весь код созданной функции будет выглядеть следующим образом:

    jQuery(function($) {
    
         $('.mytext').on('keyup keypress paste', 'textarea', function(event) {
            var mytext = $(this),              
                counter = mytext.next('small')
                .find('.counter'),
                max_char = 500;
                
            if (mytext.val().length >= max_char) { // Если количество символов больше или равно максимуму
                    
                     counter.text(0);
                     event.preventDefault();
                     mytext.val(mytext.val().slice(0,max_char));
                           } else {
                                counter.text(max_char - mytext.val().length)}
        }); // End func
    
    }); //End mainfunc

Готово. Форму можно сохранить и проверить ее работу.

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

Счастливые обладатели Chronoforms 6, желающие использовать этот метод сразу для нескольких, созданных ими форм обратной связи, могут сохранить эту функцию в виде блока.

 
Добавить комментарий