1. 程式人生 > >阻止瀏覽器自動填寫表單

阻止瀏覽器自動填寫表單

登入時會遇到瀏覽器自動將表單補充了,由於我們瀏覽器有一個記住密碼功能,然後選擇了記住之後,坑了~是個表單就把你的賬號密碼自動填進去。。。。不需要填的也填上了

看了好多方案,列舉一下,遇到的可以都試試

方法一: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>

 隱藏前