瀏覽器保存密碼後自動填充問題

問題描述

在瀏覽器中進行登陸操做時瀏覽器每每會問咱們是否須要記住密碼，當咱們點擊了記住密碼後，發現瀏覽器會自動填充此域名下已經保存的帳號密碼，給用戶帶來不便。加了HTML5 中的新屬性autocomplete="off" ，可是並無產生效果。

瀏覽器自動填充機制

反覆測試後發現瀏覽器自動填充機制是知足：頁面裏有一個type=password的input且這個input前面有一個type=text的input的時候就會進行自動填充。firefox和360瀏覽器的處理方式是：只要檢測到頁面裏有知足填充機制的，無論是否是display：none 的，只要檢測到就直接往裏填充。並且是有幾個符合條件的就填充幾個。而chrome 54版本略有不一樣：知足上面的條件且頁面裏只有一個type=password 的input。纔會自動給第一個type=text 的input填充帳號，給type=password 的input填充密碼。

解決方案

因此根據這個機制，個人解決辦法是：給第一個type=text的input前面再加一個隱藏的type=text的input，給第一個type=password的input前面再加一個隱藏的type=password的input。

<style type="text/css">
.hidden-input{
  position: relative;
  width: 0;
  height: 0;
  overflow: hidden;
}
/*讓input看不見，而不是直接display: none，若是直接display: none，則不生效*/
.hidden-input .form-control{
  position: absolute;
  left: -1000px;
}
</style>

<form onsubmit="return false;">
  <div class="form-horizontal">
    <div class="form-group">
      <div class="col-sm-3"><label for="" class="label">提現地址</label></div>
      <div class="col-sm-9">
        <div class="hidden-input">
          <!--讓瀏覽器自動填充到這個input-->
          <input type="text" class="form-control">
        </div>
        <input type="text" autocomplete="off" class="form-control bg-transparent" placeholder="提現地址">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-3"><label for="" class="label">備註</label></div>
      <div class="col-sm-9">
        <input type="text" autocomplete="off" class="form-control bg-transparent" placeholder="備註">
      </div>
    </div>
    <div class="form-group mb-10">
      <div class="col-sm-3"><label for="" class="label">交易密碼</label></div>
      <div class="col-sm-9">
        <div class="hidden-input">
          <!--讓瀏覽器自動填充到這個input-->
          <input type="password" class="form-control">
        </div>
        <input type="password" autocomplete="off" class="form-control bg-transparent"placeholder="交易密碼">
      </div>
    </div>
    <div class="form-group pt-10 no-mb">
      <div class="clearfix">
        <div class="col-xs-12">
          <button type="button" class="btn btn-primary btn-lg btn-block">肯定提交</button>
        </div>
      </div>
    </div>
  </div>
</form>

到目前爲止(2018-09)這個方法在chrome、firefox、ie、360、ios、安卓等各設備各瀏覽器中都有生效！

2019.02.20修改

最近項目中發如今Chrome(72.0.3626.109)版本中只使用一個hidden-input不生效了，嘗試在加一個hidden-input就能夠了，如：

<!--在頁面中若是沒有type=password的input，那麼使用這種方法100%有效-->
<div class="hidden-input"><input type="text" class="form-control"></div>
<div class="hidden-input"><input type="password" class="form-control"></div>

<input type="text" autocomplete="off" class="form-control bg-transparent" placeholder="提現地址">