Material Design登录表单自动填充时标签未添加active类求助

我之前也碰到过一模一样的问题！浏览器自动填充登录表单时，Material Design的标签就是不会自动加上active类，明明功能都正常，就这个细节闹心。这里有几个亲测有效的解决办法，你可以试试：

方法1：页面加载后主动检查并激活标签 #

浏览器自动填充一般在页面加载完成后就会完成，我们可以在DOM加载完毕后，遍历所有有值的输入框，手动给对应的标签添加上active类：

document.addEventListener('DOMContentLoaded', function() {
  // 遍历登录表单里的所有输入框
  document.querySelectorAll('#login_form input').forEach(input => {
    // 如果输入框有内容
    if (input.value.trim() !== '') {
      // 根据你的DOM结构找到对应的label，这里假设label在.form-group容器里
      const label = input.closest('.form-group').querySelector('label');
      if (label) {
        label.classList.add('active');
      }
    }
  });
});

如果自动填充有延迟，比如某些浏览器会晚一点填充，加个小延迟更稳妥：

setTimeout(() => {
  document.querySelectorAll('#login_form input').forEach(input => {
    if (input.value.trim() !== '') {
      const label = input.closest('.form-group').querySelector('label');
      if (label) label.classList.add('active');
    }
  });
}, 150); // 150ms足够覆盖大部分浏览器的填充延迟

方法2：监听自动填充的样式变化 #

Chrome这类浏览器会给自动填充的输入框加上-webkit-autofill的伪类，我们可以用MutationObserver监听这个变化，一旦检测到就激活标签：

// 创建观察者实例
const autofillObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    const input = mutation.target;
    // 检查输入框是否被自动填充
    if (input.matches('input:-webkit-autofill')) {
      const label = input.closest('.form-group').querySelector('label');
      if (label) label.classList.add('active');
    }
  });
});

// 给登录表单的所有输入框添加监听
document.querySelectorAll('#login_form input').forEach(input => {
  autofillObserver.observe(input, { attributes: true });
});

小提示：关于autocomplete="off" #

你表单里加了autocomplete="off"，但现在很多主流浏览器会忽略这个属性，尤其是登录表单。如果想彻底禁用自动填充，可以给密码框设置autocomplete="new-password"，不过这可能影响用户体验，看你需求权衡。

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