禁止瀏覽器保存密碼和禁止瀏覽器填充密碼
瀏覽器保存密碼是根據input="password"來判斷的,所有我們只要保證瀏覽器在dom結構中識別不到密碼框即可。
so:
-->密碼輸入位置默認為input="text"。
-->在輸入框上添加 onfocus="this.type='password'" 輸入框獲得焦點時改變輸入框格式為密碼框
-->輸入密碼
-->在提交前清空輸入框密碼,並修改密碼框為文本框。(我的提交為發生Ajax提交,可根據自己實際情況進行調整,或者情況密碼之后,將值保存在一個隱藏域中,再提交表單)
-->commit。
1. 使用此方法即可在進入界面時瀏覽器不填充密碼,也不會在提交之后保存密碼。
2. IE8+、Chrome、FF、360測試通過。
3. 其實寫這段代碼的時候只是為了禁止Chrome保存密碼,對於其他瀏覽器只是驗證是否正常顯示。
4. 次方法不針對通過js向密碼框輸入密碼的情況,因為js輸入不觸發獲得焦點事件
瀏覽器保存密碼有時會導致一些奇葩問題,比如本該填寫數額的地方瀏覽器自作主張的給你填上了帳號,即使加載時清空,雙擊仍然會以下拉框的方式供你選擇。所以最后我決定直接禁掉保存密碼功能,實現起來卻還是遇到了麻煩:包括設置autocomplete為off(此方法已確定無效)、動態設置password屬性等方法都有各種各樣的兼容問題,要么谷歌、要么火狐、要么IE的高低版本。最后解決方法如下,IE、EDGE、FF、Chrome測試通過:密碼框type設置為password,設置一個隱藏域,在表單提交前將密碼框的value填入隱藏域——>把密碼框的value替換為圓點(Chrome的圓點比較小,百度可以找到)——>把密碼框的type改為text——>提交表單,完成。
<input type="password" name="txtPassword" style="display:none">
<input type="password" name="txtPassword" placeholder="請輸入密碼" autocomplete="off" />
<input type="password" style="display:none;width:0;height:0;">
<input data-placeholder="請輸入密碼" name="password" data-required="true" type="password" autocomplete="new-password" data-max-length="50" tabindex="2" spellcheck="false" id="auto-id-1505904797992" placeholder="請輸入密碼">
先輸入一個隱藏文本域,再輸入第二個展示的文本框,重點是我加黑的字體,編譯器可能會無法識別,但是瀏覽器可以解析