修复自动填充与字段标签重叠的问题

Question

我的表单中内置了加拿大 Post AddressComplete 工具。它类似于 Google 地图自动完成，一旦您开始输入地址，它就会在下拉菜单中显示建议。

但是，一旦您 select 地址，Postal Code 和 City 字段中的文本就会与标签重叠。但是，当我使用 Google Chrome 自动填写表格时，数据在 Postal Code 和 City 字段中显示正常。

如果有帮助，我在下面包含了加拿大 Post AddressComplete 的代码，以及两个字段的 HTML。

您可以在 https://donorbox.org/youthminds 查看表格，只需 select 任意数量并单击下一步，这将带您进入带有字段的第二页。

截图：https://i.imgur.com/RxewFQ3.png

除了完全隐藏字段标签外，我还没有找到解决方案。我已经尝试了在有关 Chrome 自动填充重叠字段标签的其他问题上找到的 JS 代码，但它们没有用。

加拿大Post地址填写：

<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>

Postal 代码字段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 and/or CSS 的重叠问题，或者是否可以将字段标签更改为显示在字段下方的帮助文本？

表单本身支持帮助文本，但只能添加到附加/额外问题，不能添加到现有字段。

Answer 1

遗憾的是，您无法修改下拉样式，因为它是本机浏览器元素，不属于 DOM。

我的建议是使用 autocomplete="off" 属性禁用 html 代码中的自动填充功能：

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

Answer 2

第一

隐藏表单标签 CSS:

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

第二

两个字段都添加了占位符

onload 事件使占位符代码在表单的其余部分完成加载后加载，否则它将不起作用并且不会添加占位符。

如果您不能使用字段 ID 或者它不起作用，请使用字段名称。

将getElementById('Your Field ID').替换为getElementsByName('Your Field Name')[ 0].

如果 HTML 已经包含占位符，则将占位符代码替换为：

document.getElementsByName('Your Field Name')[0].placeholder='Your Placeholder';

或

document.getElementById("Your Field ID").placeholder='Your 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");

修复自动填充与字段标签重叠的问题

Fix Autofill Overlapping With Field Labels

javascript

css

forms

autofill