【前端】瀏覽器防止自動代填和回顯已經保存的賬號的解決方案

最近遇到客戶出的難題，登錄和密碼框不要自動代填已經保存過的密碼，本以為在輸入框加個

autocomplete="off"

<input type="text" name="login_name" value="" autocomplete="off" placeholder="請輸入用戶名"/>

　

就完事，沒想到這個只能屏蔽歷史輸入，已保存的用戶信息在火狐瀏覽器還是如此的倔強，如圖所示：

 

 

 

還是要回顯提示，已經存過的其他賬號，網上溜達了一圈，還是沒有一個明明白白的答案，后來經過反復調試，

發現輸入框是文本和password類型就會觸發火狐瀏覽器的自動回顯，

網上也給過在輸入框上加上onfocus事件來更改輸入框類型的方案：

<input type="text" onfocus="this.type=password" />

　　

但邏輯還是不夠嚴密，我輸錯了密碼再回刪，它又會回顯出來，表單提交后刷新也會，最后經過不斷嘗試，給出的解決方案如下：

 

 

//當把登錄輸入框和密碼輸入框的type設置為search是不會觸發的
<input type="search" name="login_name" value="" autocomplete="off" placeholder="請輸入用戶名"/>
<input type="search" id="password"name="login_passwd" value="" autocomplete="off" placeholder="請輸入密碼"/>
...
//
<script type="text/javascript">
        $(document).ready(function() {
           //表單刷新后，頁面初始化時重新將密碼框的類型改為search
           //此處要用js原生代碼，jQuery沒有權限更改input框的type屬性
           document.getElementById('password').setAttribute('type','search');
        });
       //通過密碼框輸入的值長度來設置它的類型
       //防止密碼回刪后的回顯
        jQuery("#password").bind("keyup",function(){
        var self=this;
        //加延時的目的是等keyup事件執行完
        setTimeout(function () {
        var len = $(self).val().length;
        if(len==0){
            document.getElementById('password').setAttribute('type','search');
        }else {
            document.getElementById('password').setAttribute('type','password');
        }
    }, 1);
});
            
</script>