最近項目中發現一個問題，谷歌瀏覽器記住密碼後，遇到用戶名和密碼框會自動填充進去，點擊input框會出現密碼的列表，這樣就很不安全，測試說如果你去上廁所，別人拿你的電腦，不用輸原密碼就可以改掉密碼。。。。。。不敢苟同。第一想法是不記住密碼就行啦，記住密碼怎樣都不安全，但是有了需求還得想辦法解決。
一、加一個隱藏的input框（最佳辦法）
chrome填充密碼的原理是尋找name相同的password框進行填充
所以在不需要記住密碼的頁面放一個name跟登陸時相同的的input框就可以了
在密碼框上方加一個和真正密碼輸入框同樣name的input，並設置display：none ，或者通過定位功能讓它看不見， 這樣瀏覽器的記住密碼功能就失效了
<input type="text" style="display: none;" name="xx">
<input type="password" style="display: none;" name="xx">
vue代碼如下（這裏用的是element組件）
<input type="password" name="password" style="position: absolute;left: -10000px;">
<el-form-item label="原密碼" prop="oldPassword" >
<el-input v-model="oldPassword" type="password" autocomplete="off"/>
</el-form-item>
這個是最佳的解決辦法，主要是先搞清楚瀏覽器記住密碼的原理，然後根據原理來解決。
而我就是方向有問題，導致走了很多彎路，費了很多時間，以下做個記錄。
二、加屬性 autocomplete=“new-password”
這個屬性不是所有瀏覽器都適用，也有說法是用autocomplete="off"但是原理是一樣的
但是這個方法還是不行，雖然不會自動寫入密碼，但是點擊密碼框還是會出現記住的密碼列表，治標不治本
三、通過失去焦點，獲取焦點來控制
當時發現只要input框的type是password就會出現記住密碼的列表，於是想辦法動態控制input的type
進頁面時密碼框type設置爲text，獲取焦點時將type改爲password，失去焦點又改爲text。
<el-input :type="inputType" @focus="this.inputType = 'password'" @blur="this.inputType = 'text'" autocomplete="new-password"/>
初始時設置type爲text
return {
inputType:'text'
}
但是這樣還是不行，不夠靈活，點擊輸入框兩下，還是會出現密碼列表
還有一種辦法也是相同的原理，進頁面時密碼框設置爲只讀，獲取焦點時屬性改爲false，但是有同樣的問題，點擊後再次點擊還是會出現列表。
<el-input type="password" :readonly="newReadonly" @focus="newReadonly = false" @blur="newReadonly = true" autocomplete="new-password"/>
四、使用屬性-webkit-text-security(在基於WebKit和基於Blink的瀏覽器中受支持。)
於是只能換一種思維方式，input框的type爲password不就是爲了密文展示輸入的密碼嗎，將input框設置爲text，但是展示小圓點就可以啦，這種解決可以用-webkit-text-security:disc;。
-webkit-text-security 指定要使用的形狀來代替文字的顯示。
none 無。
circle 圓圈。
disc 圓形。
square 正方形。
<input type="text" style="-webkit-text-security:disc;text-security:disc;"/>
但是這個屬性很多瀏覽器都不兼容的，不兼容的瀏覽器就展示明文了，尷尬
五、動態將密碼框的value改爲小圓點或者*
既然已有的屬性不兼容，那隻能自己動手寫了。這個方法很傻，很麻煩。
具體做法是input框的type還是text，但是監聽鍵盤輸入事件，只要鍵盤輸入，就把它動態的換成*，這樣還是可行的。
攔截字符輸入——>保存真實字符——>顯示對應個數的圓點
<input v-model="realOldPassword" type="text" v-on:input="changeInputValue()"/>
思路就是這樣了
var str=''; //定義一個空變量用來存儲密碼
var value=this.realOldPassword; //輸入的時候獲取輸入框的值
str+=value.substr(value.length-1,1); //獲取最後一個字符加到到str,因爲除了最後一個字符，其他的已經爲*
this.realOldPassword=value.replace(/./g,'*') //輸入框內容全部變爲*
console.log(str); //str即爲輸入框的內容