修复Canada Post AddressComplete自动填充与字段标签重叠问题

我来帮你解决这个Canada Post AddressComplete填充后标签与文本重叠的问题——这本质是Material Design Lite（MDL）的浮动标签没有检测到工具自动填充的内容，导致没触发上浮逻辑，而Chrome原生自动填充会自动触发MDL的状态更新，所以没问题。下面给你两种实用方案：

方案1：触发MDL文本框状态更新（保留原设计） #

我们可以监听AddressComplete的地址选择事件，在填充完成后手动告诉MDL“这个字段有内容了”，让标签上浮到正确位置。

步骤1：添加事件监听代码 #

在你现有的AddressComplete脚本之后，插入这段JavaScript：

document.addEventListener('DOMContentLoaded', function() {
  // 初始化AddressComplete并绑定地址选择事件
  new AddressComplete.Widget('donation_address', 'wt22-dj39-nm11-ua29', {
    onAddressSelected: function() {
      // 延迟100ms确保内容已填充完成
      setTimeout(() => {
        // 更新City和Postal Code字段的MDL状态
        ['donation_city', 'donation_zip_code'].forEach(updateMdlField);
      }, 100);
    }
  });

  // 通用函数：更新单个MDL文本框的状态
  function updateMdlField(fieldId) {
    const input = document.getElementById(fieldId);
    if (!input) return;

    const textfield = input.closest('.mdl-textfield');
    if (textfield.MaterialTextfield) {
      // 手动触发MDL的脏检查逻辑
      textfield.MaterialTextfield.checkDirty();
      // 强制添加is-dirty类确保标签上浮
      if (input.value.trim()) {
        textfield.classList.add('is-dirty');
      }
    }
  }
});

步骤2：添加CSS兜底（防止JS偶尔失效） #

为了保险，可以加一点CSS，确保只要输入框有内容，标签就不会重叠：

/* 强制有内容的输入框标签上浮 */
.mdl-textfield__input:not(:placeholder-shown) + .mdl-textfield__label,
.mdl-textfield.is-dirty .mdl-textfield__label {
  transform: translateY(-20px) scale(0.75) !important;
  top: 1px !important;
}

方案2：把浮动标签改成下方帮助文本（替换样式） #

如果你更倾向于把标签移到输入框下方当帮助文本，完全可以用CSS直接覆盖MDL的默认样式，不需要JS：

/* 禁用浮动标签动画，将标签移到输入框下方 */
.mdl-textfield--floating-label .mdl-textfield__label {
  transform: none !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  font-size: 12px !important;
  color: rgba(0,0,0,0.54) !important;
}

/* 移除输入框顶部的padding，因为标签不再占用上方空间 */
.mdl-textfield--floating-label .mdl-textfield__input {
  padding-top: 0 !important;
}

/* 移除所有状态对标签位置的影响 */
.mdl-textfield.is-dirty .mdl-textfield__label,
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
  transform: none !important;
  top: calc(100% + 8px) !important;
  font-size: 12px !important;
}

这个方案直接把原来的浮动标签变成输入框下方的提示文本，彻底解决重叠问题，还满足你“将字段标签改为帮助文本”的需求。

测试小提示 #

• 优先试试方案1，它保留了原有的MDL设计风格，只是修复了自动填充的状态触发问题；
• 如果方案1因为AddressComplete的事件兼容性问题失效，方案2的CSS修改更稳定，直接从样式层面解决问题。

内容的提问来源于stack exchange，提问作者6ixDevv