Angular 2输入框自动填充问题：autocomplete设置无效求助

我之前也碰到过Chrome这类主流浏览器完全无视autocomplete="off"的情况，简直头疼！浏览器为了“优化”用户体验，经常会忽略这个属性自动填充邮箱或用户名，给搜索类输入框添乱。给你几个亲测有效的解决方案：

• 用autocomplete="new-password"替代off
  很多浏览器（比如Chrome）对new-password这个值会特殊处理——因为这是用于设置新密码的字段，不会关联到用户的历史邮箱/用户名记录，所以能有效阻止自动填充。修改后的代码：

  <input [(ngModel)]="query" type="text" class="form-control search-control" placeholder="Search for orders (by order number)" autocomplete="new-password">
  

• 添加隐藏的“诱饵”输入框
  浏览器会优先填充页面中第一个匹配其自动填充规则的输入框，我们可以在真实输入框前加两个隐藏的假输入框，让浏览器去填这些“诱饵”，真实输入框就不会被干扰了：

  <!-- 隐藏的诱饵输入框，骗浏览器自动填充 -->
  <input type="text" style="display: none; position: absolute; left: -9999px;" autocomplete="username">
  <input type="password" style="display: none; position: absolute; left: -9999px;" autocomplete="password">
  
  <!-- 你的真实搜索输入框 -->
  <input [(ngModel)]="query" type="text" class="form-control search-control" placeholder="Search for orders (by order number)" autocomplete="off">
  

• 组件初始化时强制清空值
  如果上面的方法都没生效，可以试试在组件初始化后延迟清空绑定的变量，因为浏览器的自动填充可能在组件初始化完成后才执行：

  import { OnInit } from '@angular/core';
  
  @Component({
    // 你的组件元数据（比如selector、templateUrl等）
  })
  export class YourSearchComponent implements OnInit {
    query: string = '';
  
    ngOnInit() {
      // 延迟100ms清空，确保覆盖浏览器的自动填充值
      setTimeout(() => {
        this.query = '';
      }, 100);
    }
  }
  

这些方法里，autocomplete="new-password"是最简单的，隐藏诱饵框是最可靠的，你可以根据自己的场景选择试试~

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