在chrome瀏覽器中,瀏覽器對於[1]type為password和text的、[2]帶有name或者id屬性的<input>標簽會有自動填充表單功能,雖然會給用戶記住密碼帶來一定的便利,但是對於布局會有一定的bug。因此更多時候,開發人員選擇取消這一功能。
查詢各種資料總結出來的方案有:
1. 添加 autocomplete='off' 屬性,不讓瀏覽器自動填充。(驗證失效)
2. 添加 autocomplete='new-password' ,參考自網易郵箱登錄的處理方式。(驗證失效)
3. 添加 readonly='readonly' 或者 disabled='disabled' 屬性。(可用,但是填充功能需要監聽focus)。
4. 在<input id='ipt' 或者 name='ipt' value='' /> 標簽之前寫一個同樣的標簽,<input id='ipt' name='ipt' value='' style='display:none'>,使得自動填充作用於未顯示的元素上。(有效)
4. 去掉name和id屬性,使用class來作為選擇器的替代,不會進行自動填充。(親測 chrome 69 有效)
綜上,如果不想要填充功能,去除name和id屬性是最簡單有效的方法。