阻止瀏覽器自動填寫表單
阿新 • • 發佈:2018-11-09
登入時會遇到瀏覽器自動將表單補充了,由於我們瀏覽器有一個記住密碼功能,然後選擇了記住之後,坑了~是個表單就把你的賬號密碼自動填進去。。。。不需要填的也填上了
看了好多方案,列舉一下,遇到的可以都試試
方法一:autocomplete = "off"屬性,我用的谷歌瀏覽器,在input中添加了,和form中也添加了,谷歌瀏覽器不好使
<label for="">登入名: <input type="text" placeholder="請輸入使用者名稱" v-model="loginForm.name" autocomplete="off"> </label> <label for="">密碼: <input type="password" placeholder="請輸入密碼" v-model="loginForm.password" autocomplete="off"> </label>
方法二:將密碼的type = "password"改成type = "text"
確實不自動填充了,真的是簡單粗暴~但是有時候密碼還是希望是密文的~所以對密碼方面要求不嚴格的可以試試~
根據上面的方法,我測試了一下,刪除了其中一個input 之後,另外的input不填充
所以我猜測瀏覽器自動記住的是一個text的input,一個password的input,兩個一起就自動填充了
方法三:親測有效(用的是谷歌瀏覽器,vue專案)是根據上面的方法總結出來的,在新增一個input框,變成三個input,將新增的文字框隱藏,是不是就不自動填充了??寫了一下好使,別的瀏覽器的可以試試
將文字框display:none去掉,隱藏的input裡面也不是黃色的,說明我們存好的資訊沒有自動填充進來~
<input type="text" style="display:none"> <label for="">登入名: <input type="text" placeholder="請輸入使用者名稱" v-model="loginForm.name" autocomplete="off"> </label> <label for="">密碼: <input type="password" placeholder="請輸入密碼" v-model="loginForm.password" autocomplete="off"> </label>
上面白色的框框就是新增的input
方法四:親測有效,最後選擇使用的是下面的方法,和方法三很像,用兩個input將填充的資訊接住,在隱藏input
<input type="text" name="userName" style="display:none">
<input type="password" name="userPwd" style="display:none">
<label for="">登入名:
<input type="text" placeholder="請輸入使用者名稱" v-model="loginForm.name" autocomplete="off">
</label>
<label for="">密碼:
<input type="password" placeholder="請輸入密碼" v-model="loginForm.password" autocomplete="off">
</label>
隱藏前