Contact Form 7 как сделать автоматический переход между полями?

Ссылка скопирована
1 ответ

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

Дополнительно:

Contact Form 7 как сделать автоматический переход между полями?

Поля формы ограничены по количеству символов

Т.к. надо угадать, что такое "ограничены по количеству символов", то предположу, что речь о length input.

Подключить скрипт на сайт, и при необходимости, подкорректировать селектор полей формы:

document.addEventListener('DOMContentLoaded', () => {     const elements = document.querySelectorAll('.wpcf7-form input[type="text"], .wpcf7-form textarea');      elements.forEach((el, i) => {         const maxLength = parseInt(el.getAttribute('maxlength'), 10);          el.addEventListener('input', () => {             const length = el.value.length;             if (length >= maxLength) {                 if (i + 1 < elements.length) {                     elements[i + 1].focus();                 }             }         });     }); });

document.addEventListener('DOMContentLoaded', () => { const elements = document.querySelectorAll('.wpcf7-form input[type="text"], .wpcf7-form textarea'); elements.forEach((el, i) => { const maxLength = parseInt(el.getAttribute('maxlength'), 10); el.addEventListener('input', () => { const length = el.value.length; if (length >= maxLength) { if (i + 1 < elements.length) { elements[i + 1].focus(); } } }); }); });

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
WordPress-редакция Ответ

В Contact Form 7 автоматический переход на следующее поле можно сделать JavaScript-ом. Логика простая: слушаем ввод в поле, если длина достигла лимита, переводим фокус на следующее поле в этой же форме.

Лучше привязываться не ко всем input на сайте, а к конкретным полям опросника. Добавьте им класс, например auto-next, и задайте maxlength.

[text* code-1 class:auto-next maxlength:4]
[text* code-2 class:auto-next maxlength:4]
[text* code-3 class:auto-next maxlength:4]

[text* code-1 class:auto-next maxlength:4] [text* code-2 class:auto-next maxlength:4] [text* code-3 class:auto-next maxlength:4]

JS:

document.addEventListener('input', function (event) {
  const field = event.target;
 
  if (!field.classList.contains('auto-next')) {
    return;
  }
 
  const max = parseInt(field.getAttribute('maxlength'), 10);
 
  if (!max || field.value.length < max) {
    return;
  }
 
  const form = field.closest('form');
  const fields = Array.from(form.querySelectorAll('.auto-next'));
  const index = fields.indexOf(field);
  const next = fields[index + 1];
 
  if (next) {
    next.focus();
  }
});

document.addEventListener('input', function (event) { const field = event.target; if (!field.classList.contains('auto-next')) { return; } const max = parseInt(field.getAttribute('maxlength'), 10); if (!max || field.value.length < max) { return; } const form = field.closest('form'); const fields = Array.from(form.querySelectorAll('.auto-next')); const index = fields.indexOf(field); const next = fields[index + 1]; if (next) { next.focus(); } });

Если пользователь вставляет текст из буфера, код тоже сработает, потому что используется событие input, а не только keyup. Для мобильных это важнее.

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

Если форма подгружается в попапе или через AJAX, убедитесь, что скрипт подключён глобально после Contact Form 7 и не зависит от конкретного момента загрузки формы. Делегирование через document.addEventListener как раз удобно тем, что работает и для динамически появившихся форм.

Итог: используйте класс auto-next, maxlength и небольшой JS на событии input. Это решает задачу без отдельного плагина и нормально работает на мобильных.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

linkedin Из-за чего выкидывает из аккаунта LinkedIn? 0 ответов code-review Нужен ли код-ревью React/TypeScript проекта? 0 ответов Telegram Как добиться, чтобы Telegram прислал мне именно смс код, а не через звонок его диктовал? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов