Edge浏览器登录表单输入框自动完成关闭失效问题求助

问题原因 #

现代浏览器为了提升用户体验，会忽略autocomplete="off"设置，尤其是识别为登录/注册类的表单字段时，会强制触发自动填充。

具体修复方案 #

针对你的代码，按以下步骤修改：

1. 修正输入框的type属性
   邮箱输入框改为type="email"，密码输入框改为type="password"，让浏览器准确识别字段类型：

   <div class="form-control">
       <input type="email" required autocomplete="off">
       <label>Email</label>
   </div>
   <div class="form-control">
       <input type="password" required autocomplete="off">
       <label>Password</label>
   </div>
   

2. 使用浏览器未识别的autocomplete值（备选方案）
   如果上述方法仍无效，可将autocomplete设置为随机字符串（比如autocomplete="nope"），浏览器无法识别该值时会放弃自动填充：

   <input type="email" required autocomplete="nope">
   <input type="password" required autocomplete="nope">
   

3. 额外技巧：添加隐藏的假输入框
   在真实输入框前添加两个隐藏的假输入框，让浏览器优先填充这些无效字段，从而避免干扰真实输入框：

   <form autocomplete="off">
       <!-- 假输入框，用于"欺骗"浏览器自动填充 -->
       <input type="text" style="display: none;" autocomplete="username">
       <input type="password" style="display: none;" autocomplete="current-password">
       
       <div class="form-control">
           <input type="email" required autocomplete="off">
           <label>Email</label>
       </div>
       <div class="form-control">
           <input type="password" required autocomplete="off">
           <label>Password</label>
       </div>
       <!-- 其余代码不变 -->
   </form>
   

完整修改后的代码示例 #

<div class="container">
    <h1>Login Form</h1>
    <form autocomplete="off">
        <!-- 隐藏假输入框 -->
        <input type="text" style="display: none;" autocomplete="username">
        <input type="password" style="display: none;" autocomplete="current-password">
        
        <div class="form-control">
            <input type="email" required autocomplete="nope">
            <label>Email</label>
        </div>
        <div class="form-control">
            <input type="password" required autocomplete="nope">
            <label>Password</label>
        </div>
        <button class="btn">Login</button>
        <p class="text">Don't have a account?<a href="#">Register</a></p>
    </form>
</div>

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