問題描述
在瀏覽器中進行登錄操作時瀏覽器往往會問我們是否需要記住密碼,當我們點擊了記住密碼後,發現瀏覽器會自動填充此域名下已經保存的賬號密碼,給用戶帶來不便。加了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、安卓等各設備各瀏覽器中都有生效!