前言
最近完成一個項目時需要取消谷歌瀏覽器的密碼自動填充功能，爲了用戶方便，大多瀏覽器都有保存某個網站的密碼並在後面再打開這個網站且需要輸入密碼的時候自動填充。這個功能是方便，但是我們有時候不需要使用這個功能，怎麼樣通過前端代碼的寫法來實現禁用呢，這就是本文的重要內容。
我在項目裏遇到的就是這樣一個情景，我打開項目網站的登錄頁面輸入用戶名密碼登錄成功，此時谷歌瀏覽器問是否保存密碼，點擊保存，然後在我項目裏面有修改密碼頁面，其中包括了舊密碼、新密碼、重複新密碼三個type爲password的input標籤，當我選中的時候它會有一個下拉選項把保存的密碼填充進去（如下圖），這顯然不是我所需要的，將我用的方式記錄下來，有用的話還請點個贊。
須知
登錄頁面可以是自動填充的，不需禁用，以下我只是用登錄頁面來舉例，具體需要禁用的是類似修改密碼頁面。
- input標籤
首先以下的都是在chorme瀏覽器上的運行結果，chorme在遇到type=’password’的時候纔會有自動填充密碼，一般只有單獨的type=’text’的input標籤是沒有填充的。所以一旦我們包含type=’password’的input標籤chorme就會把你在當前網站（注意不是網址，是你的整個項目）下保存的密碼填充進去。
- autocomplete屬性
網上大多數人都說只需要將input標籤的autocomplete屬性設置爲off就行了，事實上呢在一些瀏覽器上是可以的，但是有些瀏覽器就不行了，比如chorme（其它瀏覽器沒有試過），chorme老版本的瀏覽器。
還有人說將autocomplete屬性設置爲new-password，這時候發現是沒有自動填充了，但是點擊輸入時會有下拉選項選擇填充密碼（如下圖），這不還是沒取消嗎。
還有說在初始化頁面的時候設置type=’text’，在獲取到焦點的時候再修改爲type=’password’，效果和上面一樣。
還有就是添加兩個隱藏的input標籤（要對應寫name屬性）來欺騙瀏覽器，且不說方法很低級（這裏我就不貼出來了），最後效果和上面一樣。
我的方法
由於自動填充密碼是瀏覽器後面完成的，所以去修改源碼不太現實，這和自己造輪子沒什麼區別。我們只需要讓瀏覽器找不到填充的位置就可以了。具體方式就是先告訴瀏覽器我的type=passowrd的input標籤是一個新創建的密碼，也就是設置autocomplete=”new-password”，然後不給這個input標籤設置id和name屬性，這樣就無法填充了，核心代碼如下：
<div class="input-group inputStyle">
<span class="glyphicon glyphicon-lock dropdown-toggle input-group-addon" style="top: 0px"></span>
<input class="form-control inputTextStyle" type="password" autocomplete="new-password" placeholder="請輸入密碼">
</div>沒有id和name屬性我們要獲取這個標籤的值的話可以使用classs屬性或者通過父元素來獲取：
# 通過父元素獲取密碼值
pwd = $('.inputStyle input[type=password]').val();登錄頁面的完整代碼和效果圖如下：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>歡迎登錄</title>
<!-- Bootstrap CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
@media (max-width: 768px) {
body{
margin: 0;
padding: 0;
background: #ddd;
}
}
@media (min-width:768px) {
body{
margin: 0;
padding: 0;
background-size:1920px 949px;
background-image: url('/static/img/桌面背景.jpg');
width: 1920px;
height: 949px;
}
#myLoginView{
width: 665px;
padding: 0 0px 20px 0px;
position: absolute;
z-index: 1;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.code {
font-family:Arial;
font-style:italic;
color:#ffffff;
font-size:14px;
border:0;
cursor:pointer;
width:120px;
height:40px;
line-height: 40px;
text-align:center;
vertical-align:center;
display: inline-block;
border-radius: 5px;
}
a {
text-decoration:none;
font-size:12px;
color:#288bc4;
}
a:hover {
text-decoration:underline;
}
.topTitle{
position: relative;
background: #288bc4;
height: 70px;
line-height: 70px;
width: 100%;
color: #ffffff;
font-size: 25px;
/* text-align: center;*/
}
.inputStyle{
margin-top: 10px;
border-radius: 6px;
margin: 20px 20px 0 20px;
}
.inputTextStyle
{
width: 400px;
font-size: 14px;
height: 50px;
padding-left: 10px;
}
.inputCodeStyle{
width: 280px;
font-size: 14px;
height: 50px;
border-radius: 5px;
padding-left: 10px;
}
.loginBtn{
position: relative;
color: #ffffff;
background: #288bc4;;
height: 50px;
line-height: 50px;
text-align: center;
width: 93%;
border-radius: 5px;
font-size: 20px;
margin: 10px 20px 0 20px;
}
input{
outline:none;
}
.background{
width: 100%;
height: 100%;
background: rgba(200,200,200,0.7);
/* background-image: url('/static/img/桌面背景.jpg') no-repeat;*/
background-size:100% 100%;
}
</style>
</head>
<body>
<div class="bg bg-blur"></div>
<div class="background">
<div class="col-md-4,col-sm-4,col-lg-4 center-block " id="myLoginView">
<div style="background: #ffffff;width: 520px;padding-bottom: 20px;margin:40px 72.5px 0 72.5px;">
<div class="topTitle">
<div style="display: inline-block;align-self: center;margin-left: 40%;">用戶登錄</div>
</div>
<div class="input-group inputStyle"><span class="glyphicon glyphicon-user dropdown-toggle input-group-addon" style="top: 0px"></span>
<input id="userId" class="inputTextStyle form-control" type="text" name="userId" placeholder="請輸入用戶名">
</div>
<div class="input-group inputStyle">
<span class="glyphicon glyphicon-lock dropdown-toggle input-group-addon" style="top: 0px"></span>
<input class="form-control inputTextStyle" type="password" autocomplete="new-password" placeholder="請輸入密碼">
</div>
<div class="input-group" style="display: flex;justify-content: space-between; align-items: center; margin: 20px 20px 0 20px;">
<input class="inputCodeStyle" type="text" name="controlId" placeholder="請輸驗證碼" type="text" id="inputCode">
<div class="code" id="checkCode" onclick="createCode();">
<canvas id="verifyCanvas" width="120" height="40" style="cursor: pointer;border-radius: 5px;">您的瀏覽器版本不支持canvas</canvas>
</div>
</div>
<input class="loginBtn" id="Button1" onclick="validateCode();" type="button" value="立即登錄"/>
</div>
</div>
</div>
<!-- jQuery -->
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
</script>
<!-- jQuery -->
<script src="/static/js/gVerify.js"></script>
<!-- Bootstrap JavaScript -->
<script src="/static/js/bootstrap.min.js"></script>
<!-- code.js -->
<script src="/static/js/loginCheck.js"></script>
</body>
</html>注意，上訴代碼你拿去運行是不會自動填充的，你得在你的項目中登錄並在瀏覽器彈出保存用戶密碼的時候保存密碼再打開你的登錄頁面纔會自動填充。其次當你的頁面中只包含type=password的input標籤的時候上訴方法就有問題了，比如在修改密碼頁面，首先我們不需要它自動填充密碼，而且修改密碼頁面一般只有舊密碼、新密碼、重複新密碼三個需要type=password的input標籤，這時候沒有type=text的input標籤，此時用上面的方法就有問題了，解決辦法是加一個隱藏type=text的input標籤，不加的效果如下：
下面是修改頁面的body部分代碼：
<div class="col-lg-10 col-lg-offset-1 col-md-offset-1 centerDiv col-md-10 col-sm-12 col-xs-12">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">輸入舊密碼</label>
<div class="col-sm-10" id="oldPwd">
<!-- 這裏添加了一個隱藏的type=text的input標籤 -->
<input type="text" style="display: none;">
<input type="password" class="form-control" placeholder="" autocomplete="new-password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">輸入新密碼</label>
<div class="col-sm-10" id="pwd">
<input type="password" class="form-control" placeholder="" autocomplete="new-password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">確定新密碼</label>
<div class="col-sm-10" id="pwdMore">
<input placeholder="" class="form-control" type="password" autocomplete="new-password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default btnStyle" id="eidtPwd">確定</button>
<button type="button" class="btn btn-default btnStyle" id="reset">重置</button>
<button type="button" class="btn btn-default btnStyle" id="goback">返回</button>
</div>
</div>
</div>
</div>不加的效果就是前面第一張圖片。