@darkersoul
web - программист

Как изменить позицию курсора при использовании автозаполнения?

Есть обычная CF7 форма на обычном лендинге на WordPress. Из плагинов ничего подозрительного нет. Есть момент, который хотелось бы исправить. У браузера Яндекса есть автозаполнение полей. Когда кликаешь по полю телефона всплывает небольшое окно автозаполнения с вариантами ранее используемых номеров. При наведении на любой номер он тут же заполняется в поле телефона и так с другими номерами. Все происходит без кликов. Если убрать курсор с окна автозаполнения то поле телефона очищается. Но курсор устанавливается в конец маски в поле и посетитель не может набрать номер вручную пока не кликнет на поле. Задача в том, что курсор должен оставаться в начале маски после цифры 7, например в маске +7 (---) --- -- --. Перепробовал много ивентов но не помогает. Ощущение что у этого окна автозаполнения свои ивенты. Прикрепляю видео где это наглядно показано, оно в формате webm. Кстати на нем не видно почему-то формы автозаполнения, но сам момент прекрасно виден. Если не запустится с яндекс диска то скачайте и запустите отдельно: https://disk.yandex.ru/d/GVSkJ_15dWGQug

PS. Если отключить JS на странице, то с курсором все в порядке, он остается в начале. Осталось найти тот самый скрипт что формирует маску и поправить его. Пока не нашел. Это получается сам плагин CF7 делает?

PS2. Подключен скрипт github.com/RobinHerbots/Inputmask все дело в нем и он это делает. Не ясно как поправить его поведение, это получается баг?

Вот код формы, на всякий случай:
<form action="/#wpcf7-f163-o1" method="post" class="wpcf7-form init" aria-label="Контактная форма" novalidate="novalidate" data-status="init">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="163">
<input type="hidden" name="_wpcf7_version" value="5.8.4">
<input type="hidden" name="_wpcf7_locale" value="ru_RU">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f163-o1">
<input type="hidden" name="_wpcf7_container_post" value="0">
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
<input type="hidden" name="_wpcf7_recaptcha_response" value="">
</div>
<p><span class="wpcf7-form-control-wrap" data-name="phone"><input size="40" class="wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel required" aria-invalid="false" placeholder="+7 (---) --- -- --" value="" type="tel" name="phone" inputmode="text"></span><input class="wpcf7-form-control wpcf7-submit has-spinner button" type="submit" value="Позвоните мне"><span class="wpcf7-spinner"></span>
</p><div class="wpcf7-response-output" aria-hidden="true"></div>
</form>
  • Вопрос задан
  • 121 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы