Question

我在表单中内置了Canada Post AddressComplete工具。它类似于Google Maps Autocomplete，在其中，一旦您开始输入地址，它就会在下拉菜单中显示建议。

但是，一旦选择了地址，“邮政编码”和“城市”字段中的文本就会与标签重叠。但是，当我使用Google Chrome浏览器自动填写表单时，数据在“邮政编码”和“城市”字段中显示正常。

如果有帮助，我将下面的Canada Post AddressComplete代码以及两个字段的HTML包括在内。

您可以在https://donorbox.org/youthminds处查看该表格，只需选择任意金额，然后单击“下一步”，即可将您带到包含字段的第二页。

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

除了完全隐藏字段标签外，我还没有成功找到解决方案。我已经尝试过在关于Chrome自动填充重叠字段标签的其他问题上发现的JS代码，但是这些代码不起作用。

加拿大邮政地址完成：

<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

不幸的是，您不能修改下拉样式，因为它是本机浏览器元素，不属于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（'您的字段ID'）。 替换为 getElementsByName（'您的字段名称'）[0]。

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

document.getElementsByName（'您的字段名'）[0] .placeholder ='您的占位符';

OR

document.getElementById（“您的字段ID”）。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");

修复带有字段标签的自动填充重叠

2 个答案: