Исправить перекрытие автозаполнения метками полей

Question

У меня есть инструмент Canada Post AddressComplete, встроенный в мою форму.Это похоже на автозаполнение Google Maps, где после того, как вы начнете вводить свой адрес, в выпадающем списке появятся подсказки.

Однако после выбора адреса текст в полях Почтовый индекс и Город пересекается сэтикетки.Но когда я использую Google Chrome для автозаполнения формы, данные отображаются в полях Почтовый индекс и Город в порядке.

Если это помогает, я включил ниже приведенный ниже код Почты Канады, а также HTML-код длядва поля.

Вы можете просмотреть форму в https://donorbox.org/youthminds,, просто выберите любую сумму и нажмите «Далее», и вы попадете на вторую страницу с полями.

Снимок экрана: https://i.imgur.com/RxewFQ3.png

Кроме полного скрытия меток полей, мне не удалось найти решение.Я пробовал код JS, который я нашел по другим вопросам о метках полей перекрытия автозаполнения Chrome, но они не работали.

Адрес почтовой рассылки Канады:

<link rel="stylesheet" type="text/css" href="https://ws1.postescanada-canadapost.ca/css/addresscomplete-2.30.min.css?key=wt22-dj39-nm11-ua29" />

<script type="text/javascript" src="https://ws1.postescanada-canadapost.ca/js/addresscomplete-2.30.min.js?key=wt22-dj39-nm11-ua29"></script>

Поле почтового индекса HTML:

<div class="mdl-cell mdl-cell--6-col" id="zip_code_container" style="visibility: visible; position: relative;"><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-invalid is-upgraded" data-upgraded=",MaterialTextfield"><input class="mdl-textfield__input" data-id="text" required="" maxlength="10" size="10" type="text" name="donation[zip_code]" id="donation_zip_code" autocomplete="off"><label class="mdl-textfield__label" for="donation_zip_code">Postal Code</label></div></div>

Городское поле HTML:

<div class="mdl-cell mdl-cell--6-col"><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-invalid is-upgraded is-dirty" data-upgraded=",MaterialTextfield"><input class="mdl-textfield__input" data-id="text" required="required" type="text" name="donation[city]" id="donation_city"><label class="mdl-textfield__label" for="donation_city">City</label></div></div>

Можно ли исправить проблему с перекрытием с помощью Javascript и / или CSS или поменять метки полей, чтобы помочь тексту, как показано нижеполе?

Сама форма поддерживает текст справки, но может быть добавлена ​​только к дополнительным / дополнительным вопросам, а не к существующим полям.

Answer 1

Первый

Спрятал метки формы с помощью CSS:

label[for="donation_zip_code"] { display: none !important; }
label[for="donation_city"] { display: none !important; }

Второй

Добавлен заполнитель для обоих полей

Событие onload приводит к загрузке кода заполнителя после окончания загрузки остальной части формы, иначе он не будет работать и заполнитель не будет добавлен.

Если вы не можете использоватьID поля или он не работает, используйте имя поля.

Замените getElementById ('Ваш идентификатор поля'). на getElementsByName ('Ваше полеИмя ') [0].

Если HTML-код уже содержит заполнитель, замените код заполнителя на:

document.getElementsByName (' Имя вашего поля ')[0] .placeholder = 'Ваш Placeholder';

ИЛИ

document.getElementById ("Ваш идентификатор поля"). Placeholder = 'Ваш заполнитель ';

function addLoadEvent(func) {  
      var oldonload = window.onload;  
      if (typeof window.onload != 'function') {  
        window.onload = func;  
      } else {  
        window.onload = function() {  
          if (oldonload) {  
            oldonload();  
          }  
          func();  
        }  
      }  
    }  

   addLoadEvent(function() {  
document.getElementById("donation_zip_code").setAttribute("placeholder", "Postal Code");

    });  

function addLoadEvent(func) {  
      var oldonload = window.onload;  
      if (typeof window.onload != 'function') {  
        window.onload = func;  
      } else {  
        window.onload = function() {  
          if (oldonload) {  
            oldonload();  
          }  
          func();  
        }  
      }  
    }  

   addLoadEvent(function() {  
document.getElementById("donation_city").setAttribute("placeholder", "City");

Answer 2

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

Я предлагаю отключить функцию автозаполнения в HTML-коде с помощью автозаполнения= атрибут off:

<input type="text" id="foo" value="bar" autocomplete="off" />