1. 程式人生 > >禁止瀏覽器自動填充到表單

禁止瀏覽器自動填充到表單

有一個登入頁,有一個新建使用者頁。他們都有form表單,有username和password 兩個input。
在登入頁的時候瀏覽器記住了密碼,如果去到新建使用者頁則 username 和 password 會被自動填充上去。

解決的方法:
使用 autocomplete 屬性

在不需要自動填充的 input 上設定 autocomplete 屬性:

<input autocomplete="off">

這個方案對於 FireFox 和一些老版本的 Chrome 是可以的,但在較新的 Chrome 中不行

解決:
使用假的 input 讓瀏覽器去填充

<input style="display:none"
> <input type="text" id="password" name="password" autocomplete="off">

這個方法對於新版本的Chrome 還是失敗

解決:
去掉style=”display:none” 同時 讓input 看不到

<form>
    <input type="password" style={{position: 'absolute', top: '-999px'}}/>
    <input type="text" name="username"/>
    <input
type="password" name="password"/>
</form>
加了一點點優化

<input type="password" style="width: 1px; height: 1px; position: absolute; border: 0px; padding: 0px;">

<input id="password" type="password" placeholder="Password" autocomplete="new-password">