谷歌浏览器保存密码之后，input自动填充的问题

<input type="hidden" name="search-type" class="search-type" value="1">
<input type="text" class="testin-txt testin-chosen-search form-control" ng-model="searchKeywords" autocomplete="off" id="keyword" placeholder="这里是自动填充了之前的账号..." name="keyword" ng-focus="searchStatus()">

谷歌浏览器在输入账号密码之后，打开另外一个页面，input框会自动填充之前输入的账号。网上查了几种方法：

• autocomplete=”off” -无效
• 网易邮箱的autocomplete=”new-password” -无效
• 去掉name和id -无效
• 修改登录页面的input的type，页面里input都写成type=text，等获得焦点的时候给改成type=password，这个登陆页面是早就做好了的，改动太大，没有改这个（网上说IE下type是个只读属性，修改type的方法并不能兼容IE），没去测试

感觉快要凉凉的时候，突然灵光一闪！！！多复制几个看看会不会全部填充！！！于是出现了以下这段代码：

<input type="hidden" name="search-type" class="search-type" value="1">
<input type="text" class="testin-txt testin-chosen-search form-control" ng-model="searchKeywords" autocomplete="off" id="keyword" placeholder="这里是自动填充了之前的账号..." name="keyword" ng-focus="searchStatus()">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />

妈耶！奇迹出现了！只有最后一个input是自动填充的！于是将代码改了改：

方案一：（自动填充范特西...）
<input type="hidden" name="search-type" class="search-type" value="1">
<input type="text" class="testin-txt testin-chosen-search form-control" ng-model="searchKeywords" autocomplete="off" id="keyword" placeholder="这里是自动填充了之前的账号..." name="keyword" ng-focus="searchStatus()">
<input type="text" value="" style="display:none;" />

方案二：（依然自动填充范特西...）
<input type="hidden" name="search-type" class="search-type" value="1">
<input type="text" class="testin-txt testin-chosen-search form-control" ng-model="searchKeywords" autocomplete="off" id="keyword" placeholder="这里是自动填充了之前的账号..." name="keyword" ng-focus="searchStatus()">
<input type="hidden" value="" />

方案三：（雾草！不填充了！就决定是你了！）
<input type="hidden" name="search-type" class="search-type" value="1">
<input type="text" class="testin-txt testin-chosen-search form-control" ng-model="searchKeywords" autocomplete="off" id="keyword" placeholder="雾草！不填充了！" name="keyword" ng-focus="searchStatus()">
<input type="text" style="width: 0; height: 0; opacity: 0; position: fixed; left: -10000px;" placeholder="防止Google浏览器自动填充到text文本域，在后面多加一个text input标签，将自动填充的内容转移到这，不能用display:none或者input=hidden" />

总结：

不能用display:none或者input=hidden，元素必须可见。

备注：

登录的时候，只是输入了账号和密码一个text、一个password，如果输入密码的时候有两个以上text不知道是否要写多个input来做填充，遇到了再解决吧。

2021.11.10 – ElementUI el-form 自动填充解决方案

在 el-form 最顶上加上一个超出屏幕范围的 password 类型的 el-input，亲测 type 为 text 时不生效，代码如下：

<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <el-input type="password" style="position: fixed; left: -100000px;" placeholder="解决自动填充密码的问题"></el-input>

      <h3 class="title">后台管理系统</h3>

      <el-form-item prop="username">
        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>

      ......