Auto completion problem on Firefox or Chrome

Problem

瀏覽器提供自動輸入的功能，如果是在登入畫面，就非常方便。如果是在修改資料的地方，就不一定這麼方便了。舉例來說，像新增使用者的功能，使用者預期的帳號密碼應該是空的，但瀏覽器卻會幫你填入它所記載的帳號密碼。

How to?

網路上提供的作法不乏是加入autocomplete=“off”，

<input type="text" autocomplete="off" name="name"/>
<input type="password" autocomplete="off" name="password"/>

根據參考1與我測試結果(Firefox 16.0)，會有兩種可能:

1. 阻止瀏覽器記錄表單欄位內容，對相似表單提供自動完成功能。
2. 阻止瀏覽器從Session內容記錄表單內容，對相同頁面提供自動完成功能。

而在記錄完成後，針對有加入autocomplete=“off”的表單或欄位，就不會執行自動完成。然而這個作法，根據參考一與自行在Firefox 42.0上測試，並不適用於Firefox(since version 38)、Google Chrome (since 34)與Internet Explorer (since version 11)。這是為了讓user選擇一個夠強健的密碼，又避免忘記密碼，因此各新版瀏覽器預設都提供了帳號密碼管理功能，而選擇忽略此屬性。

所以最後試驗了參考2的做法，只要加入隱藏的input，就可以避免瀏覽器將帳號密碼填到你不想出現的地方。

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

經過測試，推測這方法是要讓自動完成輸入到隱藏欄位又或者是打亂瀏覽器自動完成的layout偵測。(參考2有一個透過javascript的解法，但我認為它是來亂的)

此外，我想到如果這是由瀏覽器自行填入的，那是不是代表著: HTML中藏著密碼? 因此透過Firefox的開發者工具列發現的確如此:

因此我多設定value去避免此問題:

<input type="password" style="display: none" value=" "/>

後記

• 2016-04-11 發現chrome上無效，但可以透過autocomplete=“new-password”解決。
• 新解法: link

Reference

• How to Turn Off Form Autocompletion?
• autocomplete = 'off' is not working on firefox
• disabling-chrome-autofill