Materialize CSS：浏览器自动填充时邮箱与密码标签重叠问题

嘿，我之前也踩过Materialize这个标签重叠的坑，结合你给出的代码和问题现象，咱们一步步来搞定它：

问题根源分析 #

这个问题主要和浏览器自动填充、autocomplete属性设置，以及Materialize文本字段的初始化时机有关。当浏览器自动填充输入框内容时，Materialize的JS可能没检测到输入框已有值，导致标签没有自动上浮到正确位置；另外autocomplete="off"在现代浏览器里经常被忽略，反而会干扰Materialize的字段状态判断。

具体解决方案 #

下面是几个经过验证的修复步骤，你可以逐个尝试：

1. 调整autocomplete属性值

把邮箱和密码字段的autocomplete改成浏览器认可的特定值，而不是off：

<div class="row" style="margin-top: 21px;">
  <div class="input-field col s12">
    <!-- 邮箱字段用autocomplete="username"，适配浏览器自动填充逻辑 -->
    <input id="email" type="email" class="validate" name="user_login" required="" autocomplete="username">
    <label for="email">Email Address</label>
  </div>
  <div class="input-field col s12">
    <!-- 密码字段用autocomplete="current-password" -->
    <input id="password" type="password" class="validate autofill" name="password" required="">
    <a class="forgot" href="{"auth.recover_password"|fn_url}">Forgot?</a>
    <label for="password">Password</label>
  </div>
</div>

注：现代浏览器会忽略autocomplete="off"，用username和current-password既能让浏览器正确识别填充类型，又不会干扰Materialize的字段状态判断。

2. 确保M.updateTextFields()在正确时机执行

把原来的$(document).ready()换成$(window).load()，确保页面所有资源加载完成后再初始化文本字段，同时手动处理自动填充的字段状态：

$(window).on('load', function() {
  // 初始化所有Materialize文本字段
  M.updateTextFields();
  
  // 额外处理：检查自动填充的字段，手动激活标签
  $('#email, #password').each(function() {
    if ($(this).val().length > 0) {
      $(this).siblings('label').addClass('active');
    }
  });
});

这段代码不仅会触发Materialize的官方初始化逻辑，还会手动检查输入框是否有值（比如浏览器自动填充的内容），如果有就给对应的标签加上active类，强制标签上浮到正确位置。

3. 调整输入框的class顺序

把autofill类放在validate后面，确保Materialize的样式和JS优先处理核心的validate类逻辑：

<input id="password" type="password" class="validate autofill" name="password" required="">

效果验证 #

做完以上修改后，刷新页面测试：

• 手动输入内容时，标签应该正常上浮
• 浏览器自动填充账号密码时，标签也会保持在上浮状态，不会和输入内容重叠

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