浏覽器防止自動代填和回顯已經儲存的賬号的解決方案

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

<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>