輸入文本字段自動完成（自動填充），在Chrome

Question

如預期我有一個電子郵件文本字段網頁不能正常工作，這不是一個<form>標籤內，像這樣：

<input id="email" label="False" name="email" placeholder="Email" required="required" type="email" value=""> 

我正在使用最新的Chrome（v35），並且我之前輸入了一個名爲「example@domain.com」的電子郵件（爲了解釋）。

問題是這樣的： 當我重新加載我的網頁時，點擊電子郵件文本字段並開始輸入「exa」，一個自動完成框彈出「example@domain.com」。 如果我將鼠標光標移到建議上，而不點擊它，文本字段會在其中顯示「example@domain.com」。當我將光標移離建議框時，文本字段仍會顯示完整的電子郵件地址。

這是爲什麼？因爲當我嘗試使用jQuery或香草JavaScript讀取文本字段的值時，我得到「exa」，而不是「example@domain.com」。

$("#email").val(); // returns "exa" 

如果1包膜一個<form>標籤，上述問題內輸入文本字段，不發生 - 自動完成文本從輸入字段消失當鼠標光標從它移開，所以文本字段和值讀取同步。

<form><input id="email" label="False" name="email" placeholder="Email" required="required" type="email" value=""></form> 

我創建了a JSFiddle with a demo。

根據this，輸入字段可以在<form>標籤之外完美工作。

我已經在Firefox上測試過了，一切正常。

那麼爲什麼呢？

Answer 1

爲什麼不在輸入欄中使用autocomplete="off"屬性。這一個我，你可以發佈您的代碼適用於Chrome

<input id="email" label="False" name="email" placeholder="Email" autocomplete="off" required="required" type="email" value=""> 

Updated Fiddle